Learn VBA & Macros in 1 Week!

CSS - Background Url Problems

Full Excel VBA Course - Beginner to Expert

Background Url Problems	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>

Full Excel VBA Course - Beginner to Expert

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)

Css Link And Background Problems

Similar Tutorials

View Content

I'm setting up my first CSS page and am having a problem I do not understand.

I set up my CSS page "test.css" like this:<STYLE TYPE="text/css">

BODY {background-color: #C4C4C4}
H1 {font-family: serif; font-style: italic; font-weight: 900; font-size: xx-large; color : #CC3300}
H2 {font-family: Fantasy; font-style: normal; font-weight: 700; font-size: large; color : #666699}
P {font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: x-small; color : #993366}
B {background-color: #FFFFFF; font-size: medium}

</STYLE>

If I copy this code directly into my <HEAD> section, it all works as expected, but when I replace this with a <LINK REL="test.css"> statement, the background and bold styles do not work while all the rest work the same.

Any ideas???

Joel

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;
}

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 Background Image

Similar Tutorials

View Content

for some reason my background image is NOT showing up--
i have tried everything that i can think of --

i do have an IMAGE directory on server-- and the image is in the directory --

i am sure it is something stupid that i am not seeing or doing
but sure would appreciate a little help--

thanks in advance for help-- i so appreciate it

here are links to site and code

PAGE

CSS

Css Background Image Problems

Similar Tutorials

View Content

- EDIT -

I feel stupid because the images are named content_02.jpg not content02.jpg

Sorry - I knew I wasn't crazy

I've encountered a seriously odd css difficulty. Where as two nearly identical tags being called upon in the same manner... one will work and the other will not.

This is my Stylesheet

Code:

td.bgimg1 {
background-image: url('images/content02.jpg');
}

td.bgimg2 {
background-image: url('images/content06.jpg');
}

td.bgimg3 {
background-image: url('images/index_17.jpg');
}

td.bgimg4 {
background-image: url('images/index_18.jpg');
}

td.upbgimg1 {
background-image: url('../images/content02.jpg');
}

td.upbgimg2 {
background-image: url('../images/content06.jpg');
}

td.upbgimg3 {
background-image: url('../images/index_17.jpg');
}

td.upbgimg4 {
background-image: url('../images/index_18.jpg');
}

td.upbgimg5 {
background-image: url('../images/comic_01.jpg');
}

A:link
{
	FONT-FAMILY: Verdana, tahoma, Arial;
	COLOR: #284966;
	TEXT-DECORATION: underline;
}
 A:visited 
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    color : #284966;
    text-decoration : underline;	
}
A:active
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #284966;
    TEXT-DECORATION: underline;
}
A:hover
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #FF8C00;
    TEXT-DECORATION: underline;
}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	margin-bottom:0
}
table{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}

This is the code where they are called upon...

Code:

<td width="16" class="upbgimg3"></td>

This one works

Code:

<td width="16" class="upbgimg4"><div align="right"></div></td>

As does this..

---

But the following don't work.

Code:

<td class="upbgimg2">&nbsp;</td>

Code:

<td class="upbgimg1" valign="bottom"><div align="center">- Text -</div></td>

I am linking to my style sheet as follows.

Code:

<link href="../textstyle.css" rel="stylesheet" type="text/css">

Any ideas?

Background Style In Css, Big Problems In Ie

Similar Tutorials

View Content

take a look at www.bosszine.be, looks fine isn't it
sidebar no problems at all both in IE and FF

now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF

but is that so? try to capture the sidebar images from IE
it won't work

don't take notice at the flash infobox, that's a work in a progress

furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar)

there's clearly a rendering problem in IE with my background images in the css

how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-)

any suggestions are greatly appreciated

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!

Translucent Background Problems In Ie

Similar Tutorials

View Content

ok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas?

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.

Ie Height Problems With Background-image

Similar Tutorials

View Content

Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated.

--Sean

HTML:
<p id="dot"></p>

CSS:
#dot {
position:relative;
left: 0px;
top: 0px;
width:200px;
height:6px;
background-image: url(dot.jpg);
background-repeat: repeat-x;
line-height:0pt;
margin: 0px;
}

Css, Link Background Image, Problems

Similar Tutorials

View Content

ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com

Iframe Background Colour And Image Problems

Similar Tutorials

View Content

Dear all,

I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments.

Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads.

If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background.

Is there any way around this?

Many thanks, Mark

Problems With Getting Background Images And Text To Sync

Similar Tutorials

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>

Background Image Problems With Internet Exploder

Similar Tutorials

View Content

If infinite monkeys, with infinite time, can write Shakespeare, IE's CSS support = 5 monkeys, 15 minutes.

I have a div with a background image, repeat-y. Both IE and Firefox put the background image in place, both repeat correctly.

The problem is, IE puts the background image on top of the text!!!

Background images don't get z-indexes, do they? Nothing is absolutely positioned, either.

MPEDrummer

[edit]
On further experimentation, it seems if the div with the BG image is position: relative, then it screws up IE's idea of what a background image implies
[/edit]

Firefox Problems... Float Background And Division Overlapping

Similar Tutorials

View Content

Hi,

I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE...

In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot!

Problems With Page Layout With Divs (how To Set Background Color Properly)

Similar Tutorials

View Content

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Problems Positioning Background Image Into The Top Left Hand Corner.

Similar Tutorials

View Content

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;

}

Center #main <div> In Ie + Stretch Gradient Background? (was "css Problems")

Similar Tutorials

View Content

hey, i have 2 CSS problems.

number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE.

Code:

#main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }

Code:

<div id='main' align='center'>

number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page?

thanks.