Trying to get my image to repeat on the x-axis along the top of my webpage. The image appears but doesn't repeat.
HTML:
<div id='head'><img src='img/header.jpg'></div>
CSS:
#head img {
background-repeat: repeat-x;
width: 100px;
height: 20px;
position: absolute;
}
Thanks.
This is because you've used the <img> tags to put an image on your webpage. But what you wantto do is set the background like so:
CSS:
#head {
background-image:url('img/header.jpg');
background-repeat: repeat-x;
width: 100%;
height: 20px;
position: absolute;
}
HTML:
<div id='head'></div>
Your html is displaying an image within a div.
If you want to have your image as a background you need to set it in the css file like :
#head {
background-image:url('img/header.jpg');
background-repeat: repeat-x;
width: 100%;
height: 20px;
position: absolute;
}
and then remove the img balise from your html code :
<div id='head'> </div>
stands for non-breakable space to be sure you have a content in your balise.
FoW
EDIT: Tom was faster than me
EDIT: made css work :)
This is what your code is doing:
The img tag is inserting a single image (header.jpg) into the code.
Your css styling is telling the code to repeat any css-assigned background image along the x-axis, inside the space provided by the img tag.
All that to say: assign the style directly to the head id and add header.jpg as a background-image to the style, and it'll work fine.
Try the below as an example:
<!DOCTYPE html>
<html>
<head>
<style>
.kitty
{
background-image: url('http://images5.fanpop.com/image/photos/26000000/Nyan-Cat-Gif- nyan-cat-26044255-500-375.gif');
height:400px;
background-repeat: repeat-x;
background-color:#cccccc;
}
</style>
</head>
<body>
<h1 class="kitty">Hello World!</h1>
</body>
</html>
Here is the Fiddle.
HTML:
<div id='head'></div>
CSS:
#head {
background-repeat: repeat-x;
width: 100px;
height: 200px;
position: absolute;
background-image:url("http://t2.gstatic.com/images?q=tbn:ANd9GcRueEELruucpzBbsfBcn_JPGG338iDtWWoJPYo3o9AvbKty37edzg");
}
I hope you wanted to achieve this.
if you want to repeat your image , apply image in div's background using css
HTML :
<div class="head">
</div>
CSS:
<style>
.head{
background:url("/images/pulpit.jpg") ;
width: 100px;
height: 100px;
position:absolute;
background-repeat:repeat-x;
}
</style>
Related
I would like to position the image inside the header. Currently, the top portion of the image is displayed and I want to display the middle part of the image. The top attribute makes the image clip over the parent's box. Please take a look at my code.
HTML:
<body>
<header class="header">
<div class="header-inner">
</div>
</header>
</body>
CSS:
.header {
position: relative;
width: 100%;
height: 20%;
background-color: grey;
}
.header-inner {
position: absolute;
background-image: url(../images/img.jpg);
width: 100%;
height: 100%;
}
If you want to display the middle part of the image you could use background-position on .header-inner. You can specify a custom percentage or simply center it.
background-position: center;
If you set position: absolute then block will be over the others. So just set z-index: -1; to .header-inner
I am trying to make a layout where the navigation sits in a div on top of an image. Im using z-index to do this. I tried making the image a background image but I couldnt get it to scale properly when changing the size of the browser window.
The z-index seems to be working properly but now my div that would contain the nav no longer floats right.
Anyway to fix this?
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
}
#container{
width: 100%;
height: 1000px;
background-color: yellow;
position: relative;
}
#blue{
margin-top: 20%;
width: 50%;
height: 10%;
background-color: blue;
float: right;
position: absolute;
z-index: 10;
}
#test_image{
width: 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
<div id="blue"></div>
</div>
</body>
since you use position:fixed; instead of float:right; use:
right: 0;
To make your image responsive the easiest way is to set it do the desired element as a background-image using:
background: url(yourBGimage.jpg) 50% / cover;
Not sure why you use overly the fixed but here's just an example to reflect the above lines (and without the z-index stuff): jsBin demo
For the background as an image approach did you tried?
background-size: cover;
I have a header at the top that holds the following css rule:
position: fixed;
I also have some images that hold (and need to hold) the following css rule:
position: relative;
The problem is that my header always sits at the top of the page as the user scrolls, but when they get to the image (with position:relative) this sits on top of my header. But the header should always be on top. Is there another css rule I can apply to allow this to happen?
That problem might be with z-index. Give your header z-index:999999999 and your problem will be solved.
There is no need to set position as relative or absolute. You can use the following code:
<html>
<head>
<title>Document Edit</title>
</head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100%;
height: 1500px;
background-color: #DDD;
}
.header {
width: 100%;
height: 60px;
background-color: #004080;
position: fixed;
}
.imgdiv {
width: 400px;
height: 400px;
float: left;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
</div>
</body>
</html>
In your header CSS add z-index property:
with:
z-index:10 // can be any number but should be greater than the z-index of image
in image CSS add:
z-index:5; //should be less than the z-index of header
Just set in CSS z-index: 9999 to the header div.
I have a main div as a container with a width of 90%. Inside at the top, I have a title (image) with height: 5em, display: block, and margin: auto.
My HTML code is set up like so: <img scr="">.
When I click way to the left of the picture, I am still able to click on the link. I am using Chrome for this. I tested this in Safari and Firefox; same result. IE and Opera only registered the link when my mouse was directly over the picture (which is what I want). I'm hoping I can get what I want in all browsers. Thanks.
Edit: Here's an example: http://jsfiddle.net/Bionicrm/dXaAF/.
http://jsfiddle.net/derekstory/K7Vwd/
You can put a wrapper around the entire thing specifying the size you want shown:
Example:
HTML
<div id="wrap"> <a id="test" href="test.com">
<div id="image">
</div>
</a>
</div>
CSS
body, html {
height: 100%;
}
#test {
height: 200px;
width: 200px;
}
#image {
background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
height: 100%;
width: 100%;
background-size: 100%;
}
#wrap {
width: 200px;
height: 150px;
}
Try giving the link these styles
display:block;
width:100px; //or whatever you want
height:5em;
position:relative;
margin:auto;
I have a html page with a full background image within the body tag, followed by a wrapper:
<body>
Background Image
<wrapper>
.................
Styles:
#bkimage {
position: fixed;
background: url('images/bk.jpg') no-repeat top center;
width: 100%;
height: 1240px;
z-index: -1;
display:block;
overflow:hidden;
text-indent:100%;
white-space:nowrap;
}
#wrapper {
margin: 0 auto;
width: 960px;
background: url('images/transpBlack25.png');
}
The idea is to make the background image clickable.
But we need to keep the complete contents of webpage within the #wrapper.
body and wrapper tags already have other background images.
This method is not working.
I guess it might be because of the wrapper having "margin: 0 auto" property? But am not sure.
Is there a simple workaround for this problem?
Please help...
The link is not clickable because z-index:-1 sets it behind all the other elements on the page. If something is in the background, and there is something else in front of it, all the clicks directed towards the background element will end up landing on the element directly in front of it. If you're trying to make the entire page act like one giant link, you could enclose everything in the anchor tag.
<style>
#bkimage {
position: fixed;
top:0;
left:0;
background: url('images/bk.jpg') no-repeat top center;
width: 100%;
height: 1240px;
display:block;
}
#wrapper {
margin: 0 auto;
width: 960px;
background: url('images/transpBlack25.png');
}
</style>
<body>
<a href="" id="bkimage">
<div id="wrapper">content</div>
</a>
</body>