Learn VBA & Macros in 1 Week!

CSS - Problems With Getting Background Images And Text To Sync

Full Excel VBA Course - Beginner to Expert

Problems With Getting Background Images And Text To Sync	View Content

I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated.

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>



<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img#bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
} 

#content {
  position: absolute;
  top:75;
  left:180px;
  z-index: 1;
  width: 800px;
  height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
 } 
} 
#sidebar {
  position: absolute;
  top:95;
  left:1000px;
  z-index: 1;
  width: 175px;
  height: 600px;
  background-color: #FFFFFF
  } 
} 
</style> 
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]--> 
<script language="JavaScript">
 function maximizeWin() {
	if (window.screen) {
	var aw = screen.availWidth;
	var ah = screen.availHeight;
	window.moveTo(0, 0);
	window.resizeTo(1024, 768);
   }
}
</script>
<body onload="javascript:maximizeWin()">

<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />

<div id="content"> 
test

</div> 
<div id="sidebar">Sidebar test</div> 

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Browser Text Sizing And Background Images

Similar Tutorials

View Content

Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser.

One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site.

My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content.

Anyway to fix this?

Creating Text With Background And Foreground Images

Similar Tutorials

View Content

How do create text that has a background AND foreground image? The effect I am after is looking through one image (I already have a transparent one that should work) to see text which is on top of a background image.

I figure that these would come into play...but I have not been able to make the right combination of divs, etc., to make this happen.

.back {
background: url(backsrc.gif) bottom left repeat-x;
}

.fore {
background: url(foregrdsrc.png) bottom left no-repeat;
}

I don't think this detail will matter, but just in case... I want this appearance for the text of every <td> in a particular table.

Thanks,
oak island

"ghosting" Problems With Text And Images In Ie6

Similar Tutorials

View Content

I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though!

View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about.

Here is the CSS that came with the template I'm using:

Code:

body   {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}

div.top {
	height: 50px;
	background-color: blue;
	border-bottom: 2px solid #eaeaea;
	color: #fff;
	
}

div.top h1 {
	letter-spacing: -2px;
	font-size: 40px;
	margin: -5px 0 5px 0;
	padding-left: 10px;
	
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
	padding: 10px;	
	font-family: tahoma;
}
div.left h2, div.right h2 {
	border-bottom: 1px dotted;

	font-size: 16px;	
	padding: 10px;
	margin-top: -0px;
}
div.right h5 {
	margin-left: 10px;
	margin-top: 0px;
}
div.left {
	background-color: #fff;
	padding: 5px;
	float: left;
	min-height: 400px;
	width: 200px;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
}
div.right {
	background-color: #fff;
	padding: 5px;
	min-height: 400px;
	margin-left: 220px;
	border: 1px solid #fff;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;	
}	
div.footer {	
	clear: all;
	margin-top: 15px;
	border: 1px solid #fff;
	font-size: 90%;
}

ul.menu  {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
}

ul.menu li  {
	border-bottom: 1px solid white;
	padding: 1px;
}

blockquote {
	padding: 10px;	
	border-left: 1px dotted blue;	
}

ul.menu li a {
	padding: 5px;
	display: block;
	text-decoration: none;
	border-bottom: 1px dotted;
	border-left: 1px dotted;
	padding-left: 15px;
	font-size: 85%;
	
	
}
ul.menu li a:hover {
	background-color: #eaeaea;
	border-left: 10px solid blue;
	padding-left: 6px;
}

p {
	padding: 5px;
	font-size: 90%;
}

img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder	{ float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border	{ border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }	
span.gray a { color: #808080; text-decoration: none; }

The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem.

Any help would be appreciated!
Thanks!

Background Image Width, Two Background Images?

Similar Tutorials

View Content

The layout I have going is a bit difficult to explain. Here's a diagram..

The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Problems With Images

Similar Tutorials

View Content

Background Url Problems

Similar Tutorials

View Content

I'm trying to set the background-image as follows-

background-image: url("http://ezi-trading.com/test/welcome.gif");

This works fine inside the browser, but the background image does not display when the HTML is embedded within an HTML email.

Any ideas please. The full listing is below.

Thanks
Matthew

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#banner{ background-image: url("http://ezi-trading.com/test/welcome.gif"); background-position:center; height:100px; width:700px; background-repeat:no-repeat; position:relative;  background-color:#CCCCCC; }
-->
</style>

</head>

<body>
<div id="banner">
</div>
</body>
</html>

Css Background Problems

Similar Tutorials

View Content

hi im just learning css and im trying some things out and i ran into a problem i cant solve. my background is 4 images that overlap and it looks fine when i load it on the browser.
but if i try to add my banner image i cant see the banner but my "background" is still there.

can i set a specific order of the pictures some how because i think the background pictures overlap my banner image.

heres the code minus the banner image. let me know if theres a code to put the images in the front or the back or whichever order i want.

<html>

<head>

<title>Weblinks Webdesign</title>

<style type="text/css">
#background {
position:fixed;
left:3px;
top:3px;
width:717px;
height:720px;
background-image:url(images/background.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background1 {
position:fixed;
left:400px;
top:3px;
width:717px;
height:720px;
background-image:url(images/background1.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background2 {
position:fixed;
left:400px;
top:300px;
width:717px;
height:720px;
background-image:url(images/background2.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

#background3 {
position:fixed;
left:3px;
top:300px;
width:717px;
height:720px;
background-image:url(images/background3.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
border:0px solid black; // added for clarity
}

</style>

</head>

<div id="background2"></div>
<div id="background"></div>
<div id="background1"></div>
<div id="background3"></div>

<P style="position:absolute;
top:-30px;
left:225px;
padding: 5px 5px 5px 5px;
font-size: xx-large;
color: white;">Welcome to Weblinks Webdesign</P>

<p STYLE="position:absolute;
top:150px;
left:225px;
font-size: medium;
color: black;">Weblinks is currently under construction</p>

</body

</html>

New To Css And Having Some Background Problems

Similar Tutorials

View Content

I have recently (as in yesterday) installed Fireworks and Dreamweaver and I have been turning a png into a webpage and I have spent so much time getting the page to how it is now, my problem is that when I add a paragraph <p> into the html so that I can add some text, the default css background stays but does cover the entire page any more.

I could be wrong and this could be a html issue (which as I am posting this seems more apparent) but if I remove the <p> the page displays perfectly although obviously no place to add text.

I tried grouping them into different <div> and assigning them different ids and trying multiple different css functions to get it working,assigning the background in css but this provided the exact same result so any help would be appreciated (I think this could be more html related so after looking at my files if it is feel free to move it).

You will see when you open the html file that there is a white gap under the main buttons but if u remove the <p> from the html it disappears.

XHTML 1.0 Transitional complaint
CSS level 2.1 Valid

Ok, I cant post a link to my files so below is the best I can do
or torquesro.info/Full.rar (if this is against the rules, sorry and feel free to remove it)

Two Background Images? Possible?

Similar Tutorials

View Content

Hi Folks,
I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins.

Is it possible to somehow attach an image to one side of an element?
Thanks
John

2 Background Images

Similar Tutorials

View Content

Hi

I have a table which i want to add 2 background images too.
what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible?

Can Ie Have Background Images On Both A Tr And Td?

Similar Tutorials

View Content

Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though.

This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background.

This is the css:
Code:

.professor_forum_row {
	background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}

.professor_corner_tab {
	background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}

the html is just a table with those classes assigned to the row and first td.

Any ideas on why this is happening?

Thanks,
Ryan

Possible For 2 Background Images?

Similar Tutorials

View Content

Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion?

Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that.

Background Images

Similar Tutorials

View Content

Hi there,

hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image.

this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves.

here is my code but none of the top or bottom background images show.

please help, thanking you in advance.

css:
#feature {
float:right;
width: 287px;
height: auto;
}
.featuretop {
background-image:url(../images/css/featuretop.gif);
background-position:top;
background-repeat:no-repeat;
}
.featuremiddle {
background-image:url(../images/css/feature.gif);
background-position:center;
background-repeat:repeat-y;
}
.featurebottom {
background-image:url(../images/css/featurebottom.gif);
background-position:bottom;
background-repeat:no-repeat;
}

html code:
<div id="feature">
<div class="marTOP10">
<div class="featuretop"></div>
<div class="featuremiddle"></div>
<div class="featurebottom"></div>
</div>
</div>

Background Images

Similar Tutorials

View Content

I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property.

My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site.

In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like:

<div id="image" class="page_two">

Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this

body
{
margin:0px;
}

and then attach an additional style sheet to each page that supersedes the body tag in the main sheet?

I hope I am making sense...

thanks

jon

Two Background Images

Similar Tutorials

View Content

Hello, I'm new to Dev Shed, I hope I won't seem like a fool here

Is there any way to have to background images?
I mean, I want to have a heading background image, and a footer background image to the same table.

longing to your replies>>>>

Background Images

Similar Tutorials

View Content

K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box.
HTML Coding
*************
<div id="special_feature_top">
<img src="images/specialfeatures.jpg" width="800" height="30" alt="" />
</div>

<div id="special_feature_mid">
<img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" />
<img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" />
<img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" />
</div>

<div id="special_feature_btm">
<img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" />
</div>

CSS Coding
*************
#special_feature_mid {
padding: 1px 0px 1px 10px;
background-image: url('images/content_bg.jpg');
}

That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks

Matta

Css Float And Background Problems

Similar Tutorials

View Content

Thanks for viewing my post. Here is the site I am working with:

http://www.flattrackillustrated.com/dev/

I am having two problems:

1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point?

2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen?

Thanks!

Background Layout Problems In Ie6

Similar Tutorials

View Content

Hi everyone,
Please take a look at this site:
http://174.122.106.156/~johanna/php

The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered.

Can anyone tell me what's wrong and why?

Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code.

How do you guys find and fix IE6-specific layout issues?

Thanks.

Background Image Problems

Similar Tutorials

View Content

I have a problem that I just cannot figure out.

Scenario
I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions.

Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide.

Now I can acheive this fine by placing the second image in the css style sheet for my page container.

But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window.

How can I stop this so that it is the actual lenght of the window with teh scroll.

A link to the page where if you scroll it cuts off the lilac colour:
http://www.acklamflooringservices.co.uk/development/index.html

The css code for my html/body and page div.
Code:

html { height:100% }

body 
{
	margin: 0px;
	background-color: #CCCCFF;
	background-image: url(inc/grnd.gif);
	background-repeat: repeat-x;
	height: 100%
}

#PageDiv {
	position:relative;
	width: 940px;
	margin:0px auto;
	background-image: url(inc/grnd2.gif);
	background-repeat: repeat-x;
	height: 100%
	}

Problems With Y-repeat Background

Similar Tutorials

View Content

Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason.

here is my css code:

html, body
{
margin: 0px;
padding: 0px;
background-color: #000000;
}

/**************************/
/**************************/
/**********LAYOUT**********/
/**************************/
/**************************/
div#container
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 963px;
height: 100%;
border-style: solid;
border-color: #CC9900;
border-width: 2px;
}

/*****HEADER*****/
div#header
{
background-color: Teal;
width: 963px;
height: 175px;
}

/****************/
/*****MIDDLE*****/
/****************/
div#middle
{
width: 963px;
float: left;
background-image: url('../images/left.png');
background-repeat: repeat;
}

/*****LEFT BOX*****/
div#leftbox
{
background-image: url('../images/left.png');
background-repeat: repeat-y;
height: auto;
width: 213px;
float: left;
}

div#links
{
width: 213px;
height: 375px;
float: left;
background-image: url('../images/links.png');
}

/*****MIDDLE BOX*****/
div#centerbox
{
background-image: url('../images/body.png');
background-repeat: repeat-y;
width: 535px;
float: left;
border-left: solid 1px #CC9900;
border-right: solid 1px #CC9900;
}

div#title
{
width: 535px;
height: 40px;
border-bottom-style: solid;
border-bottom-color: #CC9900;
border-bottom-width: 1px;
margin-top: 0px;
}

div#list
{
width: 535px;
height: auto;
background-image: url('../images/left.png');
background-repeat: repeat-y;

}

/*****RIGHT BOX*****/
div#rightbox
{
background-image: url('../images/left.png');
width: 213px;
background-repeat: repeat-y;
float: right;
}

div#news /*This is the title text for the news box*/
{
width: 213px;
height: 25px;
margin: auto;
}

div#newsbox /*This is the news box div*/
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

div#events
{
width: 213px;
height: 25px;
margin: auto;
}

div#eventsbox
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

/****************/
/*****FOOTER*****/
/****************/
div#footer
{
background: #333333;
width: 963px;
height: 55px;
clear: both;
background-image: url('../images/footer.jpg');
}

/*****CONTACTS*****/
div#phone
{
float: left;
width: 213px;
height: 55px;
text-align: left;

}

div#address
{
float: left;
width: 535px;
height: 55px;
text-align: center;
}

div#e-mail
{
float: left;
width: 213px;
height: 55px;
text-align: right;
}

/*****FLASH DIVS*****/
div#flashcontent
{
width: 963px;
height: 175px;
}

/********************/
/*****PROPERTIES*****/
/********************/

/*****DIVS*****/
div.event1
{
background-image: url('../images/event_1.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 37.5px;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;

}

div.event2
{
background-image: url('../images/event_2.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 20px;
margin-right: 37.5px;
margin-top: auto;
margin-bottom: auto;
}

div.list
{
width: 535px;

}

div.listtext
{
width: 435px;
}

div.sublisttext
{
width: 335px;
}

/*****LISTS*****/
ul
{
text-decoration: none;
margin-top: auto;
margin-bottom: auto;
margin-left: -10px;
width: 213px;
}

li {
list-style-image: url('../images/diamond_bullet_white.png');
width: 213px;
height: 31.25px;
margin: auto;
line-height: 31.25px;
}

/*****ANCHORS*****/
a
{
text-decoration: none;
color: #000000;
width: 213px;
height: 31.25px;
margin: auto;
}

a.e-mail /*This is issued to any anchors for e-mail, addresses*/
{
color: #000000;
font-weight: bold;
}

a:active
{
color: Red;
text-decoration: none;
list-style: none;
}

a.contacts
{
margin: none;
color: #FFFFFF;
}

/***PARAGRAPHS***/

p#contactinfo
{
color: #FFFFFF;
font-size: 11.5px;
height: 55px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
}

p.title
{
color: #000000;
font-size: 30px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
height: 40px;
}

p.body
{
width: 500px;
margin: auto;
}

p.boxtitle
{
font-size: 20px;
text-align: left;
margin-left: 7px;
margin-top: auto;
margin-bottom: auto;
}

p.subheader
{
width: 500px;
font-size: 14px;
text-align: left;
font-weight: bold;
margin: auto;
}