I want to create multiple background images but for some reason it is not working for me. I have googled online and watched some tutorial videos on youtube. I followed the tutorial instructions step by step but i do not know why its not working for me.
I am using Dreamweaver CS6.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
<style type="text/css">
body
{ background: url(images/navi-bg.png) repeat-x 0 85px, url(images/gplaypattern.png) repeat;
}
</style>
</head>
<body>
</body>
</html>
and here are the links to the images:
I want the first image to have backgound-repeat: repeat-x backgound-positon (x): 0 backgound-position (y)85px
the 2nd image should repeat
here is the solution you are missing html and head tag and also forgot closing doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body
{ background: url(http://i48.tinypic.com/23vyd6g.png) repeat-x 0 85px, url(http://i46.tinypic.com/oucxky.png) repeat;
}
</style>
</head>
<body>
</body>
</html>
Idea is this, change your code with this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-image: url(images/navi-bg.png), url(images/gplaypattern.png);
background-repeat: no-repeat, no-repeat;
background-color: transparent, transparent;
}
</style>
</head>
<body>
</body>
</html>
Have look at this jsFiddle Link - http://jsfiddle.net/nFPLN/
<style type="text/css">
body {
background: url('http://oi48.tinypic.com/23vyd6g.jpg'),
url('http://oi46.tinypic.com/oucxky.jpg');
background-repeat: repeat-x, repeat;
}
</style>
Related
I have the css code below but it doesn't apply the css to html in general only to h1 and h3 i have used the same type of looking code before but it worked
html {
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
html is as follows I could not find a error in it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Official Volleball</title>
<link href="VolleyB/CssforVB.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Official volleyball team score</h1>
<h3>Wins:1 Losses:0</h3>
<h2>Number of spikes by shawn</h2>
<h4>Spikes:3</h4>
</body>
</html>
You're applying styles to html that you appear to be wanting applied to body.
Change html to body in your CSS so that the styles apply to the correct element.
body { /* Change html to body */
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
here is my test code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
*{
margin:0;
paddin:0;
}
.warp{
background:#0F6;
position:relative;
width:100px;
height:100px;
left:50%;
}
.line{
position:fixed;
width:10px;
height:120px;
background:#F00;
}
</style>
<body>
<div class="warp">
<div class="line"></div>
</div>
</body>
</html>
in chrome and ie10 the "line" div is on left side,but in firefox,it stay with div "warp", the "line"
is a "fixed position" div, it should rendered like chrome and ie ,i think.
http://jsfiddle.net/AWdqY/
You can simply define the left property on the element (left: 0).
http://jsfiddle.net/AWdqY/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px; padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
height:100%
}
</style>
</head>
<body>
<div class="do">
X Content
</div>
</body>
</html>
I need to put that background image on body bottom, plz if anybody knows this issue tel me.
You need to give a min height to body. Here is the corrected jsFiddle link. Following is also modified css
body {
margin: 0px;
padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
min-height:500px;
}
I have problem with width using percentage in Mozilla Firefox.
In Firefox:
In Opera:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="adminite">
<title>Untitled 2</title>
<style>
#cont {
width:99.8%;
height:125px;
border:1px solid red;
background-color:#1ea1de;
margin: 0px 0px 0px 0px;
}</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>
A possibility is that you haven't reseted the browser default styles.
Try:
html, body{
margin: 0;
padding: 0;
}
If that's the case, you might benefit from using a reset stylesheet such as this one:
http://meyerweb.com/eric/tools/css/reset/
OK so uh.. it seems like XHTML Transitional doesn't wanna take 0 padding...
Help? :|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Tadah</title>
<style>
body {
width:1440px;
}
* {
margin:0;
padding:0;
}
img {
margin:0;
padding:0;
width:144px;
height:90px;
}
</style>
</head>
<body>
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" /><br />
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" />
</body>
</html>
The space between the images isn't coming from padding, it is coming from line-height. If you set line-height: 0; in the block that contains the images then they'll fit together without any space between them.
Using <br/> to stack images like that probably isn't the best approach anyway. You might have better luck with explicit positioning or sized <div> elements with background images. What will work best really depends on your specific situation though.