WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Newbie Needs Help - Multiple BG Images

Reply
  Thread Tools Display Modes
Old 4th February 13, 12:11 AM   #1
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Newbie Needs Help - Multiple BG Images

Hello All,

I began customizing a Weebly template 2 weeks ago and have been reading about and applying (successfully to my surprise!) a lot of changes to the CSS.

Once I get this done for my friend I'm going to begin at the beginning, where I should have, at w3, but hoping to get help before then.

I've found ways to alter everything except applying a tiling background image behind my existing fixed no-repeat background image.

This is for one page, in a class called .tall-header.

I'll post the existing code below and what I tried that did not work.
Hope someone will be kind enough to help.

Here's the whole body code (I only want to add to the .tall-header class):

body{
width:100%;
margin:0;
padding:0;
background:#211d1d url(bodybg.jpg) top center no-repeat;
font-family:Trebuchet MS,sans-serif;
font-size:14px;
color:#4a4f4f;
height:auto;
background-attachment:fixed;
background-size:100% auto;

}

body.tall-header {
width:100%;
margin:0;
padding:0;
background: #211d1d url(bodybg2.jpg) top center no-repeat;
font-family:Trebuchet MS,sans-serif;
font-size:14px;
color:#ffffff;
height:auto;
background-size:100% auto;

}



I've tried adding to the "background:" line another url image to show underneath the bodybg2.jpg (as it does not cover the whole screen in wide resolutions), separated with a comma, which is how I've read to do it, shown below, but does not work.

Tried this:

background: #211d1d url(bodybg2.jpg) top center no-repeat, url(bodybg3.jpg) repeat;

To clarify, I have a bg image that covers the whole screen in most resolutions but I'd like to have a tiling pattern image behind it, to cover the whole screen in all resolutions.

I know this is probably a stupid question, but hopefully that makes it an easy one to answer.

Thanks
soulsister is offline   Reply With Quote
Old 4th February 13, 09:27 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Newbie Needs Help - Multiple BG Images

You can't have two background images on the same element. You'll need to put the second one on a parent of the first one.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 5th February 13, 08:44 PM   #3
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Newbie Needs Help - Multiple BG Images

Thanks very much

After reading about parent and child elements, I'm not sure how to create a parent element for the body element.

Can I just make a <body1> element, with all the same code as the regular body except the background image, then position the <body> element as a child of it?


Below is the code for the tall.header page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body class="wsite-theme-light tall-header">
<div id="design"><a href="http://divtagtemplates.com/">Weebly Templates</a></div>
<div class="social-frame">{social}</div>
<div id="wrapper" class="clearfix">
<div id="container">
<header>
<div id="header" class="clearfix">
<div id="logo">{logo}</div>
<div id="logo2">{logo2}</div>
<nav><div id="navigation">{menu}</div></nav>
<div class="sliderContainer">
<div id="slider-tall" class="wsite-header"></div>
</div>
</div>
</header>
<div role="main">
<div id="content2">{content2}</div>
<div class="shadow2"><img src="/files/theme/shadow2.png"></div>
<div id="weebly-footer">
<ul>

<li>{footer}</li>
</ul>
</div>
</div>
</div>
<div style='display:none'>{content}</div>
</body>
</html>


Such a newb. Thanks for the help!
soulsister is offline   Reply With Quote
Old 5th February 13, 09:02 PM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Newbie Needs Help - Multiple BG Images

If you can't make a parent, you can make a child. Wrap everything in the body in a DIV as well.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 5th February 13, 10:31 PM   #5
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Newbie Needs Help - Multiple BG Images

Ooops, nevermind, I didn't realize the html element (which is already a parent) could be styled with a background. Have got it now. In case someone else wants to know...

Above the body element in main CSS file (not the tall.header file):

html{
background:#211d1d url(bodybg3.jpg) repeat;
width:100%
}

Now my page has a repeating/tiling background over the whole screen, with my body background over top of it. Oh, and I took out the bg color in the body background(s). Not really working, see next post.....................

Thanks so much for being patient enough to help with such basic things!

Last edited by soulsister; 6th February 13 at 02:06 AM.
soulsister is offline   Reply With Quote
Old 6th February 13, 02:12 AM   #6
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Newbie Needs Help - Multiple BG Images

This was working until I updated my background image files (made some minor graphic changes).

Now, as long as the html has a background image - my body images are cut off a little on each side (not showing full width).

If I take the html bg out, its fine.

Can you think of why and could this be easy to fix by adding something to the html background properties? (It's at back so not sure why affecting the body on top...)

What you've suggested above seems a bit complicated to me and only want to try that if I must.

Thanks!!
soulsister is offline   Reply With Quote
Old 6th February 13, 02:24 AM   #7
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Newbie Needs Help - Multiple BG Images

HTML element has some odd properties, and browsers aren't always consistent. That's why I suggested the DIV, so you'd have:

<body><div><!-- ... --></div></body>
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 8th February 13, 12:57 PM   #8
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Newbie Needs Help - Multiple BG Images

Thanks for the help Meesa.

Couldn't get it to work so just made my background photo include it's own tiled background in Photoshop and am using a large image file which covers the whole screen in high resolutions.

Have one last issue with my welcome page which I have posted a new thread about here: http://www.welovecss.com/showthread....6217#post36217

Want to get onto the rest of the site as friend is waiting. Will not customize that as much as it takes a lot of time to figure this stuff out when it's new!

Thanks!

Last edited by soulsister; 8th February 13 at 01:41 PM.
soulsister is offline   Reply With Quote
Old 8th February 13, 10:30 PM   #9
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Newbie Needs Help - Multiple BG Images

What was it doing? Using a large image like that works, but only for people with high speed connections.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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 01:07 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.