Using CSS, how can I display an image behind some text and also offset it on both the X and Y axis?
I have a design that is 950px wide, so I'm wanting want this image to remain 'in sync' with the rest of the header by placing it in a container that is centered and also 950px wide.
My problem is that instead of the image being 'a layer behind' the header text, it is instead displaying the image in full and pushing the rest of the contents down.
Any help is greatly appreciated.
IMAGE ADDED FOR CLARIFICATION
Thanks,
Andy.
use Percentage values in your background positions in your css
.divName {
background-position: 50%;
}
or using words like top or bottom ...
See the full list of values here
UPDATE;
use the image as a background image instead of inline html image
<div class='content'>
<p> Some content</p>
<p> More content</p>
.... even more content ...
</div>
Now the css:
div.content {
background-image: url('image path');
background-position: 50%;
}
This way the image will always be behind the content, and it will be in the center of the div.
See: http://jsfiddle.net/Fx5q3/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
CSS:
#container {
width: 300px;
margin: 0 auto;
background: #ccc;
background: rgba(127,127,127,0.7);
position: relative
}
#behindImage {
background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat;
width: 150px;
height: 150px;
position: absolute;
top: -30px;
left: -90px;
z-index: -1
}
HTML:
<div id="container">
<div id="behindImage"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero. Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque adipiscing.</p>
</div>
Do you mean something like this example?
Oke, that's more clear. Now I'm pretty sure this is what you want.
Related
I have an image and content side by side with the image positioned absolute to the left edge of the viewport and then a column of content. When I resize the browser, the image stays in place and eventually covers the content.
Is it possible to force the image to "push" to the right so that it moves left, out of the viewport as I resize? I can't change the HTML so I am forced to use the existing code.
.container {
max-width: 1230px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.content-wrap {
padding-left: 250px;
}
.floating-image {
position: absolute;
top: 50%;
left: 0;
width: 50%;
transform: translateY(-50%);
max-width: 350px;
}
.floating-image img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="" class="row-wrapper">
<div class="content-wrap ">
<h2>ABOUT US</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan porta ultrices. Quisque tincidunt felis tellus, vel pharetra nisi condimentum vitae. Etiam mollis scelerisque leo, sed posuere tortor vulputate ut. Aliquam sed nisi id tortor euismod volutpat. Praesent laoreet dictum elit. Donec placerat blandit eleifend. Pellentesque molestie metus mi. Nullam eleifend venenatis imperdiet. Suspendisse egestas lorem eu turpis sollicitudin hendrerit. Aenean ultricies ultrices tortor, at efficitur mi dapibus eu. Donec ut pharetra sapien.</p>
</p>
</div>
<div class="alignment-wrap text-left">
<div class="img-wrap floating-image">
<img src="https://via.placeholder.com/750">
</div>
</div>
</div>
</div>
You can use media queries to hide the image when the size of the window is below specified length.
So maybe try something like this:
#media (max-width: [desired width]px) {
.floating-image img {
display: none;
}
}
I'm creating a responsive page with three elements. The left two elements are set to display:inline-block so they'll appear side-by-side. The third element is set to float:right so it will align to the right side of the page instead of being inline with the other two elements. I have a CSS media query that makes all three elements display vertically when the window is less than 600px wide.
When I shrink the window smaller than 600px and then stretch it out to be wide again, the third element does not display at the top of the page. It floats to the right side of the page, but there is space at the top as if it's placed below the other two elements.
I see this behavior on a Mac in Chrome 43 and Safari 7.1.6, but NOT in Firefox 38.0.5.
Why does this happen?
Is there any remedy?
I realize there are other ways to structure this layout to avoid this issue. I'm more interested in why this behavior occurs than in alternate methods, especially since it only seems to happen in specific browsers.
Here's an illustration of the issue:
Please see the demonstration below. Use the "Full page" button so that you can resize the window to test the media query.
div#image {
display: inline-block;
vertical-align: middle;
width: 30%;
}
div#image img {
max-width: 100%;
}
div#caption {
display: inline-block;
width: 20%;
}
div#text {
float: right;
width: 30%;
}
div#text p {
margin: 0 0 1em;
}
#media only screen and (max-width: 600px) {
div#image,
div#caption {
display: block;
width: auto;
}
div#text {
float: none;
width: auto;
}
}
<div id="image">
<img src="http://lorempixel.com/400/300/abstract/3/" alt="">
</div>
<div id="caption">
Caption goes here.
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat.</p>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem.</p>
</div>
It's because of the float:none - for some reason* it remains stuck when you stretch back - just don't use it and you'll be fine. That div staying floated in a column won't probably make any difference anyway.
*(I suspect browsers may choose to ignore reverting the rules in this case to save on resources, since this sort of resizing is mostly done by developers for testing purposes and not so much by regular users - but it's just speculation)
When I add a div with overflow auto (so I get a scrollbar), the text is cut at the bottom of the banner (and you have to scroll to read the rest).
But, now the thing; I can't get a free space between the <p> tag and the bottom of the div. I have tried margin, padding and borders.. But I can't get it right. When I use margin, the top, left and right is good. But at the bottom it isn't working, only when you scroll to the bottom you can see the bottom-margin.
Can someone tell me how to get it right? I've made a jsFiddle so you can see what is wrong.
CSS
#t2_b2 {
background: #000000;
width: 500px;
height: 100px;
overflow-y:auto;
}
HTML
<div id="t2_b2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam neque, luctus et mattis at, ullamcorper quis orci. Nulla facilisi. Aliquam et quam sed augue euismod egestas. Pellentesque id varius ante. Cras eu dolor eros. In at ligula vel felis euismod sodales et eu metus. Maecenas molestie ultricies ipsum at eleifend. Quisque at odio massa. Aenean faucibus, urna non pulvinar gravida, nulla ligula laoreet tellus, a euismod ligula mi scelerisque lectus. Proin ultrices magna a lectus convallis ultrices. Nullam convallis sollicitudin lorem consequat sollicitudin. Fusce quis accumsan urna.</p></div>
Maybe you would like to wrap the scrollbox in a container - and give the container padding.
.container
{
background: #000000;
padding: 10px;
width: 500px;
}
FIDDLE
Also i added a few pixels to the height of the scrollbox so that initially the text isn't cut.
Add larger margin to the bottom of you paragraphs or to just the last one with p:last-child
One idea could be adding a div below your text div, then using relative positioning to overlay it at the bottom of your text div. fiddle
<div class="margin-bottom"></div>
.margin-bottom {
position:relative;
height: 5px;
top: -5px;
background-color:#ffffff;
opacity:0.7;
}
I have a text block in a div that is floated to the right. The div should align to the top but it has bumped down about 100px. See the text box next to the red flower here: http://174.121.46.122/~flowerwo/inside.html
I tried absolution positioning but when I do the background image disappears. It should be obvious where the text needs to be but it won't align properly.
Here is the html:
<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3>Headline</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" />
</div>
</div>
</div><!-- end small box -->
Here is the CSS:
#small-box {
width: 625px;
position: relative;
margin: 10px 0 0 5px;
background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }
img.small-box-photo { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box
Any help getting this to align properly to the top will be appreciated.
{ width: 300px; float: right; margin: 0 30px 0 0; }
#small-box-bot => display: table;
img.small-box-photo => float: left;
It does work as expected for me. Take a look at this example. Doesn't it look like what you try to achieve? If no, give more information and, preferably, the link to online version where we can see the issue.
UPDATE AFTER THE ONLINE EXAMPLE.
So, in the example you gave, there is the problem with clearing happening when:
the #r-box-lower clears the right floating with clear: right
the #r-box-lower sits at the same DOM level as #small-box, containing the weirdly shifted block of text
because of the p.1 and p.2 the #text-box is being cleared by #r-box-lower that makes it start right where #r-box-lower starts.
So, to fix the issue, you need to wrap #right-box and r-box-lower into a shared div like:
<div id="right-column" style="float: right; width: 192px">
<div id="right-box">
…
</div>
<div id="r-box-lower">
…
</div>
</div>
Surely, you want to move those inline styles into your stylesheet.
Here is my markup:
<div class="wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
</div>
<div class="adverts"></div>
<div class="clear"></div>
</div>
Fiddle here -- feel free to modify and test
I want a CSS solution that makes the content width equal to max available width or max available width - 120px depending on whether adverts div is present or not. The div may or may not be present depending on whether the page is supposed to show ads or not. The solution must work in older versions of IE.
#Salman, if you rearrange the order of the two divs then you can do this without any widths, you just float:right the "adverts" div and don't float the content
as per one of the other answers you cannot right float a div after an unfloated one in IE to achieve this same effect without a width/margin being involved
added: Here's Your example fiddle updated : http://jsfiddle.net/clairesuzy/EqYnw/8/
Example Fiddle
The jQuery just toggles the actual ad-element to show that if there no content in the adverts div it will collapse the overflow usage is explained in the code.
I'm not sure if your "not present" div is the actual "adverts" div or the elements inside it, but this should work for both as the content will default to 100% of whatever is left over
Code for info:
CSS:
html, body {margin: 0; padding: 0;}
.wrapper {
overflow: hidden;/* Makes wrapper contain its floated children */
zoom: 1; /* Makes wrapper contain its floated children in IE6 and below */
border: 1px solid #666;
background: #ddd;
}
.content {
border: 1px solid #000;
background: #fff;
overflow: hidden; /* to not wrap under adverts if content is longer - optional if you want the wrap */
zoom: 1; /* equivalent of overflow for IE6 and below */
}
.adverts {
float: right;
border: 1px solid #00c;
}
/* put any widths on the actual advert element */
.ad-element {width: 200px; height: 30px; background: #0f0;}
HTML:
<div class="wrapper">
<div class="adverts"><div class="ad-element">.</div></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
<button>Show hide ads div</button>
</div>
</div>
I assume column 1 is the content of div.content, there's at leas two ways you can get this to use max available space when the second column (div.adverts) is empty.
You can let the wrapper and content be non-floating, and let the adverts one float to the right. The non-floated divs should use all available space, and the right float should cause the text to wrap around it. As long as the adverts div (when not empty) is taller than the content it will appear as two columns. (I assume the clear div is a float clearing hack or something?)
You could also use a table (not politically correct, but a lot easier to make it work in older browsers). Let the table be 100% widht, and don't specify any widht for the table cells. An empty cell should use zero space. (This will give a two column layout even if the lenght is different without any complicated css)
In any case: To avoid bugs where defining styles for an empty element causes it to be visible, style the sub elements instead, if they're not present the css will not apply anyway, like this:
/*gives all direct subchild divs 300px widht*/
.adverts>div{ width: 300px; }
You could use the general sibling selector + for the case the .advert div is not in the HTML at all.
Let the .advert float right, and have it before your .content div in the HTML (for CSS selector)
<div class="wrapper">
<div class="adverts"></div>
<div class="content"></div>
</div>
.content
{
float: left;
width: auto;
background-color: cyan;
}
.adverts
{
float: right;
width: 120px;
height: 600px;
background-color: lime;
}
Use the sibling selector to define the smaller width if the .adverts div exists.
.adverts + .content {
width: 130px;
}
This will not work dynamically with show() and hide(). If you require that dynamically, you have to remove the .advert from the DOM.
Here is a fiddle with a demonstration using detach() instead of hide() (worked on a VM in IE6).