What should be the proper style for the IMG in order to work as a background for the Div? I don't want to use CSS to set the background on div because I will have many LI with different DIVS and images every time.
<li class="container">
<div class="inside"> some elements
<img src="some image"></img>
</div>
</li>
I would still use CSS, but inline:
<li class="container" style="background-image:url(image.jpg) top left no-repeat">
Using an image tag for background is poor semantic.
Hei!
The style for IMG in order to work as a background for the DIV:
.inside{position:relative;}
img{position:absolute;left:0;top:0;z-index:-1;}
You can position it with respect to the parent with position: absolute
To view the contents on top, I have used a priority z-index: 1 for the span element.
.inside {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
span {
position: absolute;
z-index: 1;
}
<li class="container">
<div class="inside"><span>Some Elements</span>
<img src="http://placehold.it/500x500" />
</div>
</li>
You can try like this :
<div class="div_img">
</div>
And css:
.img{
background-image: url('../images/div_img.jpg');
}
I beleive following can help, (without separate CSS)
<div class="inside" style="background-image:url('xyz.jpg');height:xypx; width=xzpx;">
</div>
Related
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I'm trying to get a very specific look for my navigation. I want the background to be a solid image and I want the links to be separated text images that float above it to make it look like a piece. I've got it aligned perfectly, the issue is that I can't get the links to appear above the background. The code is below:
<div id=Navigation>
<div id="NavBar">
<img src="Site Images/Navigation/Nav_BG.png"/>
</div><!--Nav Bar -->
<div id="NavLinks">
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
</div><!-- End of Navlinks -->
</div><!-- End of Navigation Div -->
The CSS is
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z: 2; /* What is `z`? */
}
#NavLinks{
float: none;
z: 1; /* What is `z`? */
}
I tried the z attribute but it's not working. I know that something is wrong. The div id="Navigation" must float left, or the div id="content" (not added here) won't be next to it.
Interchange the values of z-index in css of rules
#NavBar
and
#NavLinks
I would delete the background div and set the background with css like this:
HTML:
<div id="nav_links">
</div>
CSS:
#nav_links{
background-image: url('path'); /*Put here the path to your background image*/
}
Maybe if you add more information about your problem I can give you better advice.
I guess the problem is at CSS attribute z that you used. I can find anything about this, so I guess you mean z-index.
Try to change to the CSS below:
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z-index: 2 /* `z-index` instead of `z` */
}
#NavLinks{
float: none;
z-index: 1;
}
It should give you the expected result.
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
I'm currently skinning site for a virtual airline and I need help as to how to get
two images to show up on the same line instead of one breaking onto the next line.
It should be displayed as:
LOGO ICON
But instead it turns into:
ICON
LOGO
Does anyone know how to fix this in the CSS?
Thanks!
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
.head { width:100%;}
.logo {float:left; padding:10px;}
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
Replace the #top div with the following in your layout.tpl file:
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
try using links instead of using image tags ,,
HTML:
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
HTML:
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.
The hyperlink on the first image does not work, on the second image it does. If I move the first image more to the right, only the right part of the image has a working hyperlink! Any help is appreciated!
I use the following styles:
.spc {position: absolute; top: 220px; }
.r {position: relative; top: 1px; }
.k1 {position: relative; left: 1px; }
.k2 {position: relative; left: 129px; }
The images are positioned with:
<div class="spc"><div class="r"><div class="k1">
<img src="pic1">
</div></div></div>
<div class="spc"><div class="r"><div class="k2">
<img src="pic2">
</div></div></div>
Put a href before div
<a href="link.html"><div class="spc"><div class="r"><div class="k1">
<img src="pic1"></a></a>
</div></div></div>
<a href="link.html"><div class="spc"><div class="r"><div class="k2">
<img src="pic2">
</div></div></div>
</a>
It is because your second div is overlapping the first div (coz u are taking as left:129px).
Here is the demo http://jsfiddle.net/mKZz7/