I have header which has a logo image on the left .I am trying to put a background image in the header,but the bg image is starting from the right of the logo image.The logo image is a transparent PNG image ,so i guess the Bg image can put behind the logo image.
Here is the HTML
<div id="header">
<div class="fl" style="width:378px; height:79px; overflow:hidden;">
<p align="left"><img src="mysite.com/magento/skin/frontend/default/my_theme/images/dlogo.png" ></p>
</div>
</div>
CSS for header:
#header{ width:972px; padding:15px 0px 10px 0px; margin:0 auto; text-align:left; height:117px; background:url(../images/dbody_background.jpg)}
Use of z-index makes things more complicated while understanding code. Instead you can use offset parameter to change position of background image.
#header{
width:972px;
padding:15px 0px 10px 0px;
margin:0 auto;
text-align:left;
height:117px;
background:url(../images/dbody_background.jpg) 50px 10px;
}
Where,
50px is the offset from left boundary and..
10px is offset from top boundary.
you can even use negative value here. try it check it out.
You need to use the z-index property
The
#header
{
z-index : 100 ;
}
#header img
{
z-index : 101 ;
}
The image inside z-index should be greater than the header z-index..
This worked for me,
just change the Background property as this ->
background:url(../images/diwalibody_background.jpg)no-repeat scroll center top transparent;
Related
Image cover the background color of DIV but text is showing.
My code is
<div id="testing">
<img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
<div id="sample">
Text
</div>
</div>
CSS is
#testing {
width: 200px;
height:150px;
}
img {
width:200px;
height:150px;
}
#sample {
margin-top:-15px;
background: black;
color: white;
text-align:center;
}
The result is showing like
You can find the code at
https://jsfiddle.net/cz605rc5/
It can solve with background css for div.
But I prefer to use img and want to cover black background label at the bottom of the image.
You can add a transparento overlay over your image tag since, it will be transparent the image will act as a background..
Fiddle
.overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
}
Then you can move the text inside the overlay as you wish..
Since we are in 2017 i think you should first change the HTML code:
<figure>
<figcaption><span lang="en">image title</span></figcaption>
<img src="img.png" alt="Alternative Text" / >
</figure>
Now for CSS:
All you need is to make figcaption size as the image size.
Then make it position absolute, change it's z-index higher than the img, and set it's background to gradient.
Last thing is to place the span in some place: set it's position to "absolute" and place it (for example: left: 5px; bottom: 15px;)
If you want the full css just ask (:
Line height is causing the issue. You can add a line-height: 0; to #sample, or you can change the line height of the body. You could even enclose the text in some tags and apply it to that.
Using a CMS, users of my site create posts containing images of various sizes. I'd like to wrap a container div around each image, but only with say 10px of padding on the left and right. That is, collapse the outer div's width to the width of the image + 20px. Is there an easy way to do this using css?
try this:
DEMO
HTML
<div class="image-wrapper">
<img src="http://placehold.it/500/500" />
</div>
CSS
img{
max-width: 100%;
}
.image-wrapper{
padding: 10px;
background-color: gray;
float:left; /* or instead display:inline-block; */
}
I am new to Css. I don't know whether this question had answer or not. Actually i have a page
<body>
<div id="confirm">
<img src="images/help.png" alt="Help Icon">
<div id="message">
Are you sure you want to deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd
</div>
<button>Ok</button>
</div>
</body>
I am setting his style. Here is my css
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#confirm img {
border:1px solid #ccc;
margin:20px 20px 0 20px;
float:left;
width:64px;
}
#message {
width: 280px;
border:1px solid #ccc;
float: left;
white-space: normal;
margin:20px 0 0 0;
overflow: hidden;
}
#confirm button {
position: relative;
width:68px;
margin:20px 180px 0 0;
float:right;
}
Right now when i run my code it produses output like this
Now i want that no matter how large the text of the "message div" is. The "confirm div" automatically adjust their size and as well as positions all the elements inside it.
Like right now i have set "confirm div" "min-height = 120". As you see the text is cropping. The text should not be cropped, The size of message div should increase automatically depending on the size of text. As message div size increase, the confirm div also increase in height, confirm div adjust the image and button in it. Finally all the elements should be inside the confirm Div. Or you can say that the message and image should always be remain in the center of the div.
How can i do it?
Thanks
Thanks
your message text has no white space and has a verrrry long word in it, you need to all that word to be broken to auto size the div
Add
word-wrap: break-word;
to the CSS for #messsage
JSFiddle
Update
Ok that proved difficult but does this work for you JSFiddle2, I've added another div and put the image in that one, its positioned absolute not float so can centre the image. Also had to add another div thats floated as the image was to force the message to be in the right place.
word-wrap: break-word; will serve the purpose.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
DEMO
UPDATE
LIKE THIS middled from top?
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp