logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-23-2014, 10:42 AM   #1
LisaLotty
 
Join Date: Feb 2011
Posts: 22
Default Image/background that extends to page width

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
LisaLotty is offline   Reply With Quote
Old 07-23-2014, 01:11 PM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

Did you forget the link?
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-23-2014, 08:02 PM   #3
LisaLotty
 
Join Date: Feb 2011
Posts: 22
Default

http://www.impressivepaving.co.uk/
LisaLotty is offline   Reply With Quote
Old 07-23-2014, 09:32 PM   #4
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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

Code:
<!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>
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-30-2014, 02:54 PM   #5
LisaLotty
 
Join Date: Feb 2011
Posts: 22
Default

Amazing thanks
LisaLotty is offline   Reply With Quote
Old 07-30-2014, 04:19 PM   #6
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

No worries, please post back if you need any more help.
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:44 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com