Photoshop Question posted in
The official user guide can be found here.

Splitting up webpage background into different areas for different colors, patterns, etc – Photoshop

On my website, I am attempting to segregate the background into different areas. An area with just a solid black background and an area that will have a repeating background, this can be seen in the image attached. I am trying to make the pattern area on either side extend horizontally and vertically until of course, it reaches the end of the viewable webpage.

To me this seems like a particularly tricky concept, I thought of using sections on either side but I am just used to positioning elements relatively and I would like it to be precise. I also thought about just going into Photoshop creating an excessively wide and tall pattern and just covering the complete area that way.

These both seem like sub-optimal solutions.

Do you have any recommendations as to how I should set this up?

Tags:

2

Answers


  1. 0

    An easy work around is to set a background to your body, then overlay it with a black full-height centered table element. In order to have your .main-section full height, you will need to set your body and html a height: 100%.

    See code snippet.

    html, body {
  height: 100%;
  margin: 0;
}
body {
  background: rgb(255,255,0);
}

.main-section {
  background-color: #000;
  height: 100%;
  display: table;
  margin: 0 auto;
  width: 50%;
  padding: 20px;
}

.section {
  color:#fff;
}
    <body>
<div class="main-section">
    <div class="section"><h1>Content Sample</h1>
      <p>Lorem ipsum dolor sit amet, nostro invidunt referrentur ut eam. Cu has veritus laboramus. Ex vel munere mollis placerat, quidam iracundia pro ut. Qui et verterem petentium consectetuer, per vidit nobis aeterno ex. Nullam postulant efficiantur ius an, vix dictas insolens posidonium id. Ea primis feugiat sapientem qui, possit semper ex nec. Cu mea civibus ocurreret.

Eu enim lucilius efficiendi ius, ludus assentior eos ut, his probo mucius option ne. Natum populo ius ne, atqui integre quaestio in pro. Justo alterum vis cu, ne tantas oblique repudiandae cum, no putent theophrastus est. Aliquip bonorum posidonium te nec, tritani impedit dissentiet duo an. Id eros porro duo, ut oportere honestatis disputationi ius, nec iisque scaevola repudiandae no. Sea ut mollis periculis suscipiantur, eos vidisse civibus no.

Eos facer detracto an, ubique minimum insolens sed ea. Commodo ancillae ut usu. Iudico delenit sed cu, an persecuti elaboraret usu. Essent aeterno fastidii et duo, nam in viris utamur scriptorem, dicant impedit et sea. Eu vis luptatum prodesset. Mel prima accusamus an, cu ignota impetus inimicus pro, quis ignota cum no.

Audire debitis an has, populo volumus definiebas his et, sed ei cetero quaeque. Eu vel idque aliquip. Viderer argumentum pri no, est in assentior reprehendunt. Has rebum apeirian no, consul graeci has ex. Minim dicunt aliquid at vel. Mea summo scaevola cu. Et adhuc quodsi pri, eam an omnes volutpat explicari.

Et diam illud recteque vim. Feugiat accusam scripserit at mel. Elit euripidis et eam, no cum noster facilis abhorreant. Populo suscipiantur eu per, doctus vulputate accommodare ex has, congue debitis in sit.</p>
    </div>
</div>
</body>
    Login or Signup to reply.
  2. 0

    You can follow this: 

    .main-container {
    width: 100%;
    text-align: center;
    background-image: url(http://abduzeedo.com/sites/default/files/originals/pattern-library.jpg);
}
.sub-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 200px;
    background-color: black;
}
.content-block {
    background-color: white;
    width: 600px;  //You can add your width here like 1024px 
    margin: 0 auto;
    padding: 20px 15px;
}
    <div class="main-container">
    <div class="sub-container">
        <div class="content-block">
            <h1>Add your content here</h1>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search