Placing Background images

Jun 15th, 2012 at 02:10 PM
User 371048 Photo

jayjay
Registered User
59 posts

I'm having trouble trying to get the background 100% what I would like it to be.
The site I'm working on is at: http://www.somaluxury.net/dev
There are a few issues with this site that I'm just not figuring out -- I've uploaded a graphic if the site with the issues showing on them. Bascially:
1. The background needs to resize to fill the screen horizontally but I can't seem to get that done. I've tried stretch and width: 100%; parameters but that doesn't do it.
2. The dark blue portion of the background seems to stretch vertically when it should not.
3. The entire page goes much longer vertically than where the footer ends, and it also ends up with a horizontal scroll bar on it for some reason.
4. Site placed a dark blue horizontal bar under the header picture that should not be there.
5. and the bottom 2 buttons do not work in Chrome nor in Firefox (they do in IE).

I've tried changing parameters in many ways and must be overlooking some obvious things.

Hoping someone can point me in the proper direction.

Thank you.
Attachments:
-- me
Jun 15th, 2012 at 04:46 PM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

You have specified doctype xhtml. This means, among other things, that all tags must be lower case. You have a few upper case characters in tags that may cause confusion for the browsers.
I'd suggest you run your code through the W3C validator to identify some of the problem areas.
Per
www.mingas.com
Jun 15th, 2012 at 05:53 PM
User 122279 Photo

Inger
Senior Advisor
14,621 posts
Online Now

I aree with Per. Go through the code and make it all lowercase if you want to stick to xhtml, that way you'll get rid of a lot of the 79 errors shown in the validation.

Or:

You can convert it all to html5, then you don't have to bother with upper or lower case.

Which background is it that you want to have stretched horizonally? the header_pic_1.jpg?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 15th, 2012 at 05:53 PM
User 371048 Photo

jayjay
Registered User
59 posts

OK ... after googling the heck out of this, I'm apparently not finding the answers... since I wouldn't even recognize XHMTL, I imagine I'm not using it so ... and I did try changing the DOCTYPE to:

<!DOCTYPE html>
<html lang="en">

From what I can surmise, that is what I probably should have for this site, although it didn't change anything about how the site appears.

I did find the W3C validator, however, so thank you for that. I see a few minor things like <alt> tags and such, but nothing that would appear major to correct item placement in the site.
-- me
Jun 15th, 2012 at 06:16 PM
User 122279 Photo

Inger
Senior Advisor
14,621 posts
Online Now

Is this what you are looking for?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}/* Edit the height of your img here. */
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="path to your img here" width="100%" height="100%" alt="Smile"></div>
<div id="content">

</div>
</body>
</html>
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 19th, 2012 at 12:31 PM
User 371048 Photo

jayjay
Registered User
59 posts

Not entirely ...
an example pic of what I am trying to do is here:

http://www.somaluxury.net/dev/images/example_01.png

The background file is bckgrnd.jpg

If you compare this file to what I have thus far at http://www.somaluxury.net/dev I am kinda close, but these last few refinings I am not figuring out ... the stretching 100% wide and tall of the background which most likely also effects the circled area where the dark two horizontal lines should end before they get to the right side of the page as well as their vertical placement on the site.

Thank you.

-- me
Jun 19th, 2012 at 12:45 PM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

I will say that your page width is set way to wide... I have a 28 inch monitor and even I have to scroll to the right about 10 inches... I would correct this issue as well.
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Jun 19th, 2012 at 12:53 PM
User 371048 Photo

jayjay
Registered User
59 posts

That is one of the issues I am having ... the content on the page should be only 958px wide and centered, and then the background should appear under that to accomodate any screen width 958px and wider. You are seeing the entire content, are you not ... just the background is what is going to the right far off the screen?


-- me
Jun 19th, 2012 at 01:38 PM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

Correct. The page looks centered and correct. Yet, the page ground goes on for ever and a day.
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Jun 20th, 2012 at 10:37 AM
User 122279 Photo

Inger
Senior Advisor
14,621 posts
Online Now

OK, I see I misunderstood what you wanted to do above here.

To get rid of the blue lines that stick out on either side of the content, create a thin vertical stripe of the background at the very left (where there are no blue lines), like the one I have attached. Then modify the css like this:

body
{
background-image:url('./images/newbackground.png');

background-repeat:repeat-x;
}


You have to save the newbackground.png to the same location as you have for your other background.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.