PDA

View Full Version : Image/background that extends to page width


LisaLotty
07-23-2014, 11:42 AM
Hi Guys
I really like the way the orange section of this design fills the page to full width. I just don't have a clue how to do this in dreamweaver. Is this a combination of a div image and the background working together?

Lisa
http://www.impressivepaving.co.uk/

Ricky55
07-23-2014, 02:11 PM
Did you forget the link?

LisaLotty
07-23-2014, 09:02 PM
http://www.impressivepaving.co.uk/

Ricky55
07-23-2014, 10:32 PM
Really easy to achieve.

If you use the browser tools built into any decent browser you can see how its constructed by hovering over the elements.

In this case you just have a div that fills the width of the screen and then a second div thats centered and given a fixed width with an image set as a background.

Basic example


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">

<title>Enter a Title</title>

<style type="text/css">

* {
margin: 0;
padding: 0;
}

div {
background: orange;
height: 300px;
}

div > div {
background: silver;
width: 980px;
margin: 0 auto;
}


</style>

</head>
<body>


<div>

<div>
<p>Some content. In the example this element had a background image and a slider.</p>
</div>

</div>


</body>
</html>

LisaLotty
07-30-2014, 03:54 PM
Amazing thanks :-D

Ricky55
07-30-2014, 05:19 PM
No worries, please post back if you need any more help.