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>
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 creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.
Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:
html:
<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>
with the css:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}
If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.
You should use the position instead of negative margin:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}
You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property
background-position
html
<div id ="welcome">
<h2>Welcome to my website</h2>
</div>
css
#welcome {
width:100%;
height: 600px;
overflow: hidden;
background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
color: #B0171f;
}
DEMO
Read more on background-position
Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.
HTML:
<h2 id="welcome">Welcome to my website</h2>
CSS:
<style>
#welcome {
width:100%;
background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
color: #B0171f;
}
</style>
http://jsfiddle.net/#&togetherjs=DfmkLBOPVu
I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.
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>
I have the following layout:
On the left side I have a menu and big gray part on the right side is the body content. The problem is on the left menu I have a bunch of buttons. I want this menu to be fixed position and body scrollable. I Have the following css:
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
The problem is that on the red part of my menu all button unavailable, I can't click on it. looks like body overrides the menu.
Any ideas what the problem might be?
Thanks
Including the html would give a better sense of the stacking order and likely yield a better answer. Given what you've provided, this should fix:
#menu {
position: fixed;
z-index: 1;
}
In order to fix it to the top and not scroll, you don't use position: fixed;. You need to use position: absolute;. If you don't want it at the very top, then you use position: relative; and place it inside an element.
Then, in order to scroll, you use position: fixed;.
When you use position: fixed, it places the element fixed within the visible page.
However, when you use position: absolute, what this does is put it on an absolute position on the page regardless of scroll. For example, if you added the css top:0; then it would be 0 pixes from the absolute top of page, and if you scroll down it will disappear from view because it is all the way at the top of the actual page, not just the top of the visible page.
I understand it seems a bit counter-intuitive to you. However, you can see it working in the jsbin below.
Working jsbin:
http://jsbin.com/Uwuyuha/1
page.html
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}
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;