Multiple image backgrounds in the same div?

  • monkeykong

    (@monkeykong)


    14 years, 2 months ago

    Hi,
    my site is: chromatic.se and the theme is called Beautiful Day.

    I’m new to CSS but have gotten help from the theme author to make a few changes.
    However one thing remains.

    I’d like to add one more picture to the background. It seems that I can’t have two background images in the same DIV (which I don’t fully grasp) so the theme author, advised me to make a new DIV in which to store the other background image.

    – Could you guide me in changing the theme to allow one more background image?

    I’ve uploaded a background design to better explain what I’m aiming at.

    Thanks,
    Andreas W

    ps. if it’s easier to help out live, I’m “andreaswieslander” on Skype.

Viewing 12 replies - 1 through 12 (of 12 total)
  • esmi

    (@esmi)

    14 years, 2 months ago

    The theme’s author was correct, You cannot have two background images in the same div. This is not a theme issue. It’s how CSS works for all web sites.

    s_ha_dum

    (@apljdi)

    14 years, 2 months ago

    So… don’t you have that layout already?

    Thread Starter monkeykong

    (@monkeykong)

    14 years, 2 months ago

    No, the picture up at the top with clouds is in a different Div which won’t extend over 200-250 pixels something.

    I’d like a picture that’s about 500 pixels in height and I was told to make a new Div.

    The thing is that I have no idea how to do it, I’ve only replaced the background colors and images, that’s about how much I know how to do.

    If anyone could say “insert this piece of code in this .php file you’ll get a new div where you can add your top background image” I would be very grateful.

    esmi

    (@esmi)

    14 years, 2 months ago

    If I understand this correctly, you want an extra gradient image at the very top of the page. If that’s correct, you’ll need to edit header,php and add an extra div (with its own, new, class name) immediately after the opening <body> tag. Then you’ll need to edit your stylesheet and apply the new gradient image as a background to the new div and give the div the same height as the background image.

    Thread Starter monkeykong

    (@monkeykong)

    14 years, 2 months ago

    Ok, I tried, esmi. And you’ve understood it correctly.

    I made the picture 400 px in height and added an extra Div right after the body tag, which seems to work.

    I’m not sure where to call on this div in the stylesheet but I tried at a couple of places with

    /* extra */
.extra {
	background: url('img/extra.jpg') repeat-x;
	height:400px;

    The best result I got was that the picture loaded at the top of the screen, but pushed everything else down, so you wouldn’t see the title until about 500-600 pxs down (and the header looked strange).

    – How can I go about having the title (and container/blog) in the same spot it is now and this larger picture not pushing the whole page downwards?

    Rev. Voodoo

    (@rvoodoo)

    14 years, 2 months ago

    Leave the start of the new div where it is, and move the closing </div> tag down under everything that is supposed to be ‘inside’ this new pic…..

    So basically the new class ‘wraps’ everything that should be inside it

    croborn

    (@croborn)

    14 years, 2 months ago

    U can have as many bg images as u want in same div

    here is example

    It uses 3 images: left soldier, right soldier, and background image that has repeat-x.

    This is the code:

    body {

font-size:62.5%;

font-family:"Lucida Grande","Lucida Sans Unicode",Calibri,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;

background-image: url(images/bg_left.jpg), url(images/bg_right.jpg),  url(images/bg_repeat.jpg);

background-repeat: no-repeat, no-repeat, repeat-x;

background-position: top left, top right, top left;

background-color:#000;

color:#fff;

text-align:center;

margin:0;

padding:0;

}

    Note: browser renders images from the last (so repeat-x image goes at the end to render first or else it would cover other images)

    Rev. Voodoo

    (@rvoodoo)

    14 years, 2 months ago

    @croborn…that only works on safari browser
    I see no BG images on your site

    Thread Starter monkeykong

    (@monkeykong)

    14 years, 2 months ago

    croborn: your site looks lovely in Safari.
    RVoodoo: thanks for the tip, but I’m not getting it.

    I’m calling the new Div “extra”.
    The header looks like this:

    <body>

<div class="extra">
<div class="top">

	<div class="header">

		<div class="left">
			<?php bloginfo('name'); ?>
		</div>

		<div class="right">

			<h2><?php bloginfo('description'); ?></h2>

		</div>

	</div>	

</div>
</div>
<div class="container">	

	<div class="navigation">
		<ul>
			<li><a href="<?php bloginfo('url'); ?>/">Home</a></li>
			<?php wp_list_pages('title_li=&depth=1');?>
		</ul>

		<div class="clearer"><span></span></div>
	</div>

    and the CSS sheet looks like this (and sorry for pasting the whole thing, I know I’m crowding the page here):

    /* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
	background: #cec7e9 url('img/bg.jpg') repeat-x left bottom;

	color: #444;
	font: normal 62.5% Tahoma, sans-serif
}

*/ extra */
.extra {
	background: url('img/extra.jpg') repeat-x;
        height:400px;
}

p,code,ul {padding-bottom: 10px;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}
h2 {font: normal 1.6em sans-serif;}
h3 {font: bold 1.1em sans-serif;}

code {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin: 4px 0 12px;
	padding: 8px 10px;
	white-space: pre;
}

blockquote {
	background: url('img/quote.gif') no-repeat;
	display: block;
	font: bold 0.9em Verdana,sans-serif;
	padding-left: 26px
}

big {font-size: 1.1em;}

h1, h2, h3 {padding-top: 6px;}

label {
	display: block;
	font-size: 0.9em;
}

/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
        border-left: 4px solid #bac7cf;
        border-right: 4px solid #bac7cf;
        border-bottom: 4px solid #bac7cf;
        background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 780px;
}

/* header */
.top {
	background: url('img/clouds.gif') repeat-x;
	padding-left:10px; padding-right:10px; padding-top:50px;

}

/* title */
.header {
        border-top: 4px solid #bac7cf;
        border-left: 4px solid #bac7cf;
        border-right: 4px solid #bac7cf;
        background: #FFF;
	font-size: 1.2em;
	height: 150px;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 780px;
}
.header .left, .header .right {
	background: #A4A4A0;
	color: #FFF;
	height: 150px;
}
.header .left {
	/*background: #B3C2C7 url('img/header.jpg') no-repeat;*/
	text-align: center;
	width: 564px;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 150px;
}
.header .right {
	overflow: auto;
	width: 212px;
}
.header .right p, .header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {
	border: 1px solid #CFDEE7;
	border-color: #DFEEF7 #CFDEE7;
	background:#D9E1E5 url('img/nav.gif');
	height: 41px
}
.navigation a {
	background: #D9E1E5 url('img/nav.gif');
	border-right: 1px solid #AFBEC7;
	color: #456;
	display: block;
	float: left;
	text-decoration: none;
	font: bold 1em sans-serif;
	line-height: 41px;
	padding: 0 20px;
}
.navigation a:hover {background-position: left bottom; color: #234;}
.navigation ul {display: inline;}
.navigation li {float: left;}

/* main */
.main {
	border-top: 4px solid #FFF;
	background: url('img/bgmain.gif') repeat-y;
}

/* sub navigation */
.sidenav {
	float: right;
	width: 210px;
}
.sidenav h2 {
	color: #5A5A43;
	font: bold 1em Tahoma,sans-serif;
	line-height: 30px;
	margin: 0;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA;}
.sidenav li a {
	font-size: 1.1em;
	color: #554;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background: #F0F0EB;
	color: #654;
}

/* content */
.content {
	float: left;
	margin: 10px 0;
	padding: 0 16px;
	width: 531px;
}
.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}

.content ul {margin-left: 18px;}
.content ul li {list-style: url('img/li.gif');}
.content ol li {list-style: decimal;}

.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
	background: url('img/bgfooter.gif') repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	padding: 0 16px;
	line-height: 39px;
	height: 39px;
}
.footer .right {color: #DEF;}
.footer .right a {color: #DEF; text-decoration: none;}
.footer a, .footer a:hover,.footer .right a:hover {color: #FFF;}

/* posts */
.post h1 a {text-decoration:none;}
.post h1 a:hover {text-decoration:underline;}

.post {margin: 6px 0 2px;}
.post .info{
	padding: 5px 10px;
	border: 1px solid #E3E4E4;
	background:#F5F5F5;
	color: #555;
	margin: 2px 0 4px;
}
.post img {border: 4px solid #DDD; margin: 4px 0;}
.post a img {border: 4px solid #DDD;}
.post a:hover img {border-color: #CCC;}

.info a {text-decoration: none;}
.info a:hover {text-decoration: underline;}

/* comments */
.content ol li {list-style: none; background: none;}

#commentlist li {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid #700000;
	list-style: none;
}
#commentform {
	margin: 1em 0;
	background: #FAFAFA;
	width: 280px;
}
.commentmetadata {padding: 2px 0 4px;}
.commentmetadata a {color: #664;}

textarea.styled {width: 280px;}

.styled {
	font-size: 1.1em;
	background: #F8F7F6;
	border: 1px solid #D6D3D3;
}
.styled:hover {
	background: #FFF;
	border: 1px solid #D6D3D3;
}
.styled:focus {
	background: #FFF;
	border: 1px solid #939793;
}
#commentform input {margin-bottom: 3px;}

a img {border:none;}

/* calendar */
#wp-calendar {color:#A0A0A0;}

.sidenav table caption {border-bottom-color:#000;}

.sidenav table thead tr {
  border-bottom-color:#000;
  color:#A53512;
}

.sidenav table th {border-bottom-color:#000;}

.sidenav table td#today {
  border-color:#000;
  color:#A53512;
}

.sidenav table td a {
  border-bottom-color:#000;
  background-color:#EDF3DE;
}

.sidenav table tfoot {border-top-color:#000;}

.sidenav table tfoot a {background:none;}

/* calendar
--------------------------------------------------*/
#wp-calendar {
  display:inline-table;
  border-collapse:collapse;
  width:185px;
  margin:0px 10px 0 10px;
  text-align:center;
}

.sidenav table caption {
  margin: -5px 10px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
  letter-spacing: 0.1em;
}

.sidenav table thead tr {border-bottom:1px solid;}

.sidenav table th {border-bottom:1px solid;}

.sidenav table td {
  width: 225px; /* maximaize width; honestly, I don't know much about tables... */
  padding: 1px;
  font-size: 0.9em;
}

.sidenav table td#today {
  padding: 0;
  border: 1px solid;
  font-size: 1em;
  font-weight: bold;
}

.sidenav table td a {
  display: block;
  border-bottom: 1px solid;
  font-weight: bold;
  font-size: 1.15em;
}

.sidenav table tfoot {border-top:1px solid;}
.sidenav table tfoot a {
  border: none;
  font-weight: bold;
}
.sidenav table tfoot #prev a {text-align:left;}
.sidenav table tfoot #next a {text-align:center;}

#searchform {padding:10px;}

/*
   WordPress
------------------------------------------------------------------- */

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

/* Images */
img.alignleft,img.alignright,img.aligncenter {
	background-color: #FFF;
	border: 1px solid #DDD;
	padding: 3px;
}

img.alignleft {margin: 0 15px 12px 0;}
img.alignright {margin: 0 0 15px 12px;}

/* Floats */
.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {margin: 0 auto;}

    – Is it even possible to do what I’m wanting to do without starting from scratch?
    Thanks again,
    Andreas

    croborn

    (@croborn)

    14 years, 2 months ago

    Works fine in Firefox 3.6, Google Chrome 5.0.317.2 and Opera 10.5

    What browser are u using?

    Rev. Voodoo

    (@rvoodoo)

    14 years, 2 months ago

    hm…guess other browsers are coming up to speed eh? I’m on IE7 currently (at work). (I know it sucks, but the majority of the world still uses it, best to account for them)

    croborn

    (@croborn)

    14 years, 2 months ago

    It does not work in IE8 🙁

    It requires CSS3 xD

    So only new browsers 🙁

    UPDATE:
    Looks i should check this site for maximum support with Multiple Backgrounds.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Multiple image backgrounds in the same div?’ is closed to new replies.