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

How do I section website with pictures/background colors? – Photoshop

Basically I have a site created all in Photoshop and I am trying to translate it in HTML/CSS and I am having a little trouble on a few styling things I was wondering how do I section the website with multiple background images/color like I was thinking I could do this with divs but I don’t think that is working anyway any/all relevant help would be appreciated

A quick idea of what I mean is

Nav bar

*BG Image1

Content

BG image2

content
_————

footer

Tags:

3

Answers


  1. 0

    I’m nut sure what would you like, but based on your pseudo plan I can imagine something like this:

    <div id="nav">NAV</div>
<div id="div1"><p>
Lorem ipsum dolor sit amet, in quam. Vivamus aptent sodales lorem, tempus vel duis sapien id fusce, eu tincidunt. Vel orci pharetra nulla penatibus. Lacus eget a. Eu est vel maecenas et, curabitur sed integer nibh, molestie nulla </p>
<p>
Mi et, a tellus quis nonummy ultricies egestas quis, elementum lacus aenean pellentesque nisl, quam aenean. Enim quis iaculis, adipiscing volutpat et vestibulum molestie sit, morbi quis sit duis mauris, pellentesque tincidunt 
</p>
</div>

    CSS

    #nav{
  background-color: #ccc;
  width: 100%;
  height: 80px;
}

#div1{
  background-image: url("https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg");
}

#div2{
  background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
}

    Fiddle:
    https://jsfiddle.net/ypncww57/2/

    Without gat between divs:
    https://jsfiddle.net/ypncww57/3/

    Login or Signup to reply.
  2. 0

    1.) There is a <section> element in HTML5 to which you can assign background images via CSS (using classes or IDs). You can wrap your existing DIVs and other elements in those sectiontags.

    2.) If you don’t like that, you can still use DIVs to wrap your sections, and style these (using classes or IDs) via CSS.

    Login or Signup to reply.
  3. 0

    Your question is too vague, but anyway, you can use the div or the section tag and style them via CSS to your heart contents

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search