I am trying to have a Bootstrap Jumbotron that contains 2 background images. The general idea is as illustrated in the attached image. At the bottom layer is a full width photo (indicated in gray) and on top of it is a transparent PNG (indicated in yellow). The height of the Jumbotron is set at 350px, which is for the full-width photo. Having said that, I would like to top layer to go beyond 350px so it is overlapping the text in the div below the Jumbotron. How would you suggest me to achieve this?
Example
I have some HTML markup as follows:
<body>
<section class="jumbotron">
<h1>Tag line in a Bootstrap Jumbotron</h1>
</section>
<section>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet,...</p>
</section>
</body>
I have the following CSS:
.jumbotron {
background-image: url("top.png"), url("bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
height: 350px;
}
With these codes, I am able to stack the 2 background images properly so that the transparent top layer is sitting nicely on top of the bottom layer. However, I do not know how I can make the top layer go beyond the 350px such that it can overlap the text below.
Any suggestion will be greatly appreciated. Thanks!
* UPDATE *
So I attempted in answering my own question. I made some progress but the solution does not seem complete. Here's what I did...
I added an additional div to only hold the top transparent PNG layer and use negative margin to push it up to cover the jumbotron. But when I did that, the tagline in the jumbotron can no longer be highlighted/selected. It appears as if the top transparent PNG layer is covering it up. I tried playing with z-index but that didn't help. Here's my updated HTML:
<body>
<section class="jumbotron">
<h1>Tag line in a Bootstrap Jumbotron</h1>
</section>
<section class="container-fluid">
<div class="row">
<div class="png-layer"></div>
</div>
<div class="content row">
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet,...</p>
</div>
</div>
</section>
</body>
Updated CSS:
.jumbotron {
background-image: url("bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
height: 350px;
}
.png-layer {
background-image: url("top.png");
height: 500px;
margin-top: -350px;
}
.content {
margin-top: -200px;
}
Any ideas on how to fine-tune to solution to make it to perfection? Thanks!
The best approach is (in my opinion and as you correctly pointed out in the update to your question) to create a div that exclusively holds the .png you want to overlay on top of the Jumbotron and the text. The CSS of this element should include:
z-index:xxxx; where xxxx is whatever value allows your div to be shown on top of the image you intent to use as a background (i.e. higher than its containing div) but lower than the text you want it to appear under. Also remember that z-index works only on elements for which you have defined the position attribute.
pointer-events: none; so that you can still select the text below it.
Good luck.
Related
I'm wondering why the background image is behaving in this way even though I set the image as a background image in CSS:
In my HTML file, for the location section, the only content I have are paragraphs. However, the text does not appear above the background image.
I have never encountered this issue before. Would appreciate it if anyone can point out any possible cause of this.
HTML and CSS code snapshots are shown below.
.Location {
background-image: url("https://images.pexels.com/photos/586744/pexels-photo-586744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width:90%;
height:500px;
margin:0 auto;
color: white;
}
<div class="Location">
<article>
<p>Downtown</p>
<p> 384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</article>
</div>
If your goal is to set an the <article> element in the image:
.Location article {
//set position relative to its parent container in this case <div class="location">
position: relative
//positions element on top of div
z-index: 1;
//positions it in upper left corner
top: 0;
left: 0;
}
Hope you found this helpful :)
this should work unless there are other styles affecting your code
see codesandbox
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
I have a carousel with background images similar to this site
I have images that I would like to stretch to 100% of the browser width. When the user shrinks the width of his or her browser, the image should be cropped on the right and left hand sides. The image should not be resized (where the height changes). I am using the standard Bootstrap carousel layout
End result should follow be something like this
The blue rectangle in the middle is the container whose width should always be maintained. Before this container's borders are reached, the background image (in dark green with the shoes) should have it's right and left sides cropped as the width of the browser decreases.
What's the best way to do this?
The following did the trick:
.carousel.slide{
max-width: 1600px; //the largest you want the image to stretch
min-width: 900px; //the "container" width
overflow: hidden;
}
.carousel-inner{
width: 1600px;
left: 50%;
margin-left: -800px;
}
The key is the left: 50% and margin-left: -800px combo. The negative margin should be half of what the max width is(in this case, 1600px).
I've googled this topic for a long time, and I think this is the best and the most comprehensive solution.
For bootstrap 3 responsive images to be cropped, non-distorted and remain centered while keeping the same height across different width of browsers, use css background images like this:
bootstrap default carousel: just mark div with a custom class, in this case "carousel-01", and use background image in CSS for that class. Related settings below for the background image is important for the centered, cropped effect. Set fixed height (usually the height of the image) for the div, here I use div.item because there are usually carousel-01, carousel-02...
Important: the custom class shouldn't be marked to the div.carousel-caption, because there are some bootstrap default setting applying to it, which could stop the magic from happening.
HTML:
<div class="carousel-inner">
<div class="item active carousel-01">
<div class="carousel-caption">
<h3>Beautiful Slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
</div>
</div>
</div>
CSS:
.item {
height: 720px;
}
.carousel-01 {
background: url('image/ca01.jpg') no-repeat center center;
background-size: cover;
}
making a banner from bootstrap: basically the same, but simpler. Add a custom class to div, in this case, "banner-content", and add CSS background image to it with similar settings like above.
HTML:
<div class="container-fluid">
<div class="row banner-content">
<div class="col-md-12">
<h2>DEMO TEXT</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
<button type="button" class="btn btn-default btn-lg">Contact Us</button>
</div>
</div>
</div>
CSS:
.banner-content {
background: url('../image/banner.jpg') no-repeat center center;
background-size: cover;
height: 530px;
}
When you say, "would like to stretch to 100% of the browser width" the images are relative to the current width of browser (viewport), so do you mean you want the images to be 100% of the initial browser width?
Also, what would the image width be when the browser width increases? Do they stay at original 100% width or increase?
I took a shot at what I think the expected behavior is. It requires jQuery to monitor the initial viewport width.
Working demo: http://bootply.com/91957#
I think what your looking for is the clip property http://www.w3schools.com/cssref/pr_pos_clip.asp then you can use media queries to clip the relevant sides in the css.
Hope this helps
A Small improvement to the Version of Lloyd Banks, with transform -50% instead of margin. That way you only have to change the width of .carousel-inner with media queries if you want to change the height on different view ports.
Works only with css3 compatible browsers though.
.carousel.slide{
max-width: 1600px; //the largest you want the image to stretch
min-width: 900px; //the "container" width
overflow: hidden;
}
.carousel-inner{
width: 1600px;
left: 50%;
transform: translate(-50%, 0);
}
I have a query based on the following CSS and HTML code (see below).
I have a background image that spans the whole browser page (left to right), which is not what I'm after.
How can I get the background image to stay within the boundaries of my main content canvas, i.e. centered 850x600px and anything outside just be white?
body {
background-color: #ffffff;
margin:0px;
padding:0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
}
#main {
width:850px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
<body>
<div id="main">
<img src="images/female_model.jpg" id="female_model" alt="" />
<div id="colwrap1">
<img src="images/nav_bar.jpg" id="nav_bar" alt="" />
<img src="images/site_name.jpg" id="site_name" alt="" />
</div>
</div>
</body>
If you want to attach the background to the main DIV, then specify the background there. It sounds like you want the background to be centered horizontally (background-position: 50%;) but repeat for the vertical extent of the main DIV (background-repeat: repeat-y;).
body {
background-color: white;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: 50%;
// rest as before ...
width: 850px;
...
}
<div id="main">
Lorem ipsum dolor sit amet, ...
If your background image does not appear it could be because the image is inaccessible or the main DIV has no height--that could happen if female_model and colwrap1 both float.
How about you just put the background image on your #main?
Dominic is correct. Move the background properties from body to the main div and you should have what you need.
If I have understood your question correctly, you want to set the page background to white and have the background of your main div be whatever image you set it to - correct?
If so, setting body to:
body
{
background:#fff;
}
should do the trick.
Now, I also noticed that the image you want to use has a smaller width than your div.
So you will want main to have the following properties:
#main
{
background-image:url(myimage.jpg);
background-position:top;
background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
}
That should do the trick. If it still doesnt work, perhaps you want to share the page link on your server. Its possible that we have misunderstood your question.