So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.
I'm using bootstrap if that helps
<div class="jumbotron">
<div> I have images and paragraphs inside of me </div>
<div> I have images and paragraphs inside of me </div>
<div class="clearfix"></div>
</div>
I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:
.jumbotron {
position: relative;
height: 100%;
width: 100%;
}
.jumbotron img {
position: absolute;
}
.jumbotron .covering{
position: absolute;
height: 100%;
width: 100%;
background-image: url('http://lorempixel.com/400/200/');
background-size: cover;
}
You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.
Related
I first used 'background-image' CSS property in a div to display the image due to the fact that it displays it properly as I wanted it:
The image is below the nav bar (allowing the shadow to be shown).
The image is an edge to edge but only accommodate less than 30% of the
screen height according to the user screen size.
The image allows a semi-transparent overlay for a title and
description of the image.
The image will fill(crop) to fit the canvas instead of stretching
out or shrink.
How do I transfer the 'background-image' CSS property in to HTML as tag? As CSS doesn't support alt text as they're required for me to pass the exam.
I've tried to add a tag into HTML and removed background-image
property from HTML (also ruleset name to accommodate the added img
tag) However, it doesn't display it correctly as I wanted it to be.
== THE CODE ==
Old code:
CSS:
.image-container {
padding-top: 10px;
width: 100%;
height: 48vw;
min-height: 380px;
max-height: 550px;
background-image: url('/assests/DisplayImage.jpg');
background-size: cover;
position: relative;
.image-container .detail {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 0;
text-align: center;
}
HTML:
<div class="image-container">
<div class="=detail">
<h1>
Title text
</h1>
<h3>
Description
</h3>
</div>
</div>
New Code:
HTML:
<div class="image-container">
<img scr=/assests/DisplayImage.jpg>
<div class="=detail">
<h1>
Title text
</h1>
<h3>
Description
</h3>
</div>
</div>
CSS: (.image-container .detail remain the same)
.image-container img{
padding-top: 10px;
width: 100%;
height: 48vw;
min-height: 380px;
max-height: 550px;
position: relative;
}
I expect it to be like this:
Expected (original result)
Instead I got this:
The result of changing the code
In addition to this, I also wanted my image to be focused on the center of the image when the screen is resized instead of just cropping the bottom.
Thank you. This might be too specific, but I'm sure that this will help those who also used a CSS background image instead of HTML tag.
Check this pen
There's nothing wrong in your code as I see.
For aligning image to center use
background-position: center;
If you are using img tag for image use below properties.
object-fit: cover;
object-position: bottom;
Why are you using background image ?
You can use this
<img src="// url " alt ="// text">
And then the css
img {
//css
}
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I have this image:
But i want to place text in the middle like this:
How can I achieve this?
I would like to do this in html, so I would use a <div> or a <span>
Using Pseudo Elements
The above could be created using the ::before and ::after pseudoelements of the containing element. For instnace, suppose we started with this:
<h1>Keep Calm and Stack Overflow</h1>
We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.
h1::before, h1::after {
content: ""; display: block; height: 3em;
background: url('ribbon.png') center center;
}
The above is a mere example of what you may write. For a fuller demo, please see this fiddle.
Using a Background Image (Original 2010 Answer)
Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its CSS.
.imgBox {
width: 300px; height: 100px;
background-image: url('bg.jpg');
}
.imgText {
text-align: center;
margin: 0; padding: 25px 0 0 0;
}
<div class="imgBox">
<p class="imgText">Hello World</p>
</div>
You can also use absolute positioning and z-index :
<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>
And in the CSS file :
.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }
Some nice references :
http://www.w3schools.com/Css/pr_pos_z-index.asp
To me, this looks like an <img>, then some text in a <span> for example, and then a second <img>. If you put them all into a container that has text-align: center everything should be fine.
Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.