I'm trying to create a bootstrap jumbotron with a responsive background image because my first approach was static (and I have to fill the empty space with background-color: white !important;):
https://jsfiddle.net/ety0atsm/2/
And now I'm using this CSS but the height is not properly configured. How can I configure my background image to cover the entire screen all the time no matter what screen size uses the device?
https://jsfiddle.net/b40Lyep1/6/
Please check the example code at CODEPEN.
I hope this resolves your issue.. enjoy :)
HTML:
<div class="jumbotron"></div>
CSS:
body {
margin:0;
padding:0;
}
.jumbotron {
height: 600px;
background-repeat: no-repeat;
background-image: url('data:image/jpeg;base64,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');
background-size: contain;
}
Nice Question , deserves Upvote, Try This
<div class="jumbotron">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
.jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
You can use height: 100vh property to do that. Here is the update fiddle
Related
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
I need your help! I have a background image and I need one part of that image to move (rotate or zoom) whenever you hover it. This image is just an example but it's pretty similar what i have, except mine is more centered.
I want the little sticker on the bowl to move a little (rotate like 20 degrees or any sort of animation to be honest) whenever you mouse over it.
I've already cropped the sticker so now I have two images. I'm using the background as my div's bg. Here's my code:
HTML:
<header class="background-image">
<div class="sticker"></div>
</header>
CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
I've managed to place the sticker where it's supposed to be, but it's not responsive. When the screen is resized, the little sticker moves and I can't seem to find a solution for that. Basically what I need is to pin the sticker to the background image, but I have no idea if that's possible. I looked around and couldn't find anything that worked.
Does anyone have any suggestions? Is there any way that I can do this using only CSS? I only have basic knowledge of jQuery so I'd like to avoid that but if it's the only solution I'd be fine with that too.
Thanks!!
EDIT: I tried using a transparent png sticker the same size as the background, but since I need the hover effect, I end up having the same problem.
If you use vw as a unit of measurement, the sticker can track based on the size of the element
.background-image {
background-image:
url(http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg) !important;
height: 40vw;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.sticker{
width:20px; height:20px; position:absolute;
top: 20vw; left:40vw;
background:red;
}
<header class="background-image">
<div class="sticker"></div>
</header>
I finally found a solution!
This is my final code:
HTML:
<div class="background">
<img src="..."/>
<div id="pin" class="sticker">
</div>
</div>
CSS:
.background {
margin:10px;
position: relative;
display: inline-block;
}
.map img {
max-width:100%;
display: block;
}
.box {
width:20%;
height:20%;
background-image: url(...);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin {
top:60%;
left:46%;
}
I want to insert an image by CSS because I want to use captions over my image.
What I want is that the image shows completely and is responsive.
Can anyone help me with this?
Here you can see my HTML im using bootstrap. As you can see i want to let contentblock1 show an responsive image by using the CSS background-image code. I also want this background image to be responsive. But whatever i try it won't show me the background.
<div class="container">
<div class="col-sm-6">
<h1> Dit is een bootstrap site</h1>
<button type="button">click me!</button>
</div>
<div class="col-sm-6">
<div class="contentblock1">
</div>
</div>
I'm using the following CSS
.contentblock1 {
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg');
background-size: 100% 100%;
width: 100%;
}
width: 100px; /*you width*/
height: 100px; /*you height*/
/* optional: background-color: white; */
background-image: url('image.png');
background-repeat: none;
background-size: 100% 100%;
/*or
background-size: cover;
background-position: 50% 50%;*/
background-attachment: fixed;
#some-div {
background-image: <imgurl>;
background-repeat: none; //Unless you want something else
backgorund-size: 100% 100%;
}
and for responsiveness, use media-queries or a lib that is made for responsiveness such as Bootstrap.
Below you have an example of media-queries.
#media (min-width: 1200px)
{
#some-div {
width: 600px;
}
}
#media (max-width: 768px)
{
#some-div {
width: 100%;
}
}
EDIT:
http://jsfiddle.net/e8xLf4u3/
Here is your working example, it only needed content. Also, in the future please show some code for faster help and better understanding
Graag gedaan ;)
I have an image Which i need to show as background image with 100% width in footer of my webpage.But my image is getting cut at the right of the footer.
Here is my code in HTML..
<div id="footer" class="footer-shadow">
</div>
And here is the css.
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%;
color: gray;
}
Please help me to correct it and make it responsive to suit all web page size .Thanks .
You can do simple this:
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
Try to use background-size:
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%; /* it sets the div width */
color: gray;
background-size: cover; /* now bg image is full width */
}
So I have a couple of elements on a page that are sharing a background image.
My page is using bootstrap, and both elements are a 3 column width container. Each has a background and is contained via background-size.
On the 2nd element, I have made the background 90% in width so it is slightly smaller then the other background.
In Firefox this causes the 1st elements background to flicker constantly. If I change the CSS so both backgrounds are the same size, the problem goes away.
It works fine in Chrome and IE, it's just a Firefox issue.
Is this a bug, anyone had similar experience?
Tried switching the image out for an SVG and it stops the flickering. However it's not possibly to use an SVG in my case as the background image has heaps of grungy dirt, so the SVG is like 2MB.
Here is the jist of HTML and CSS:
<section id="content-panel">
<div class="container">
<div class="row-fluid">
<div id="thankyou-1" class="span3 bubble-bg-2">
</div>
<div id="thankyou-2" class="span3 bubble-bg-2">
</div>
</div>
</div>
</section>
.bubble-bg-2 {
background: url('/Content/Images/bg-bubble-2.png') no-repeat;
background-size: contain;
}
#thankyou-1 {
padding-top: 15px;
text-align: center;
}
#thankyou-2 {
background-position: center 25px;
background-size: 90% auto;
padding-top: 15px;
}
What happens if you move the background-size declaration off the shared class and set it on the #thankyou-1 id?
.bubble-bg-2 {
background: url('/Content/Images/bg-bubble-2.png') no-repeat;
}
#thankyou-1 {
background-size: contain;
padding-top: 15px;
text-align: center;
}
#thankyou-2 {
background-position: center 25px;
background-size: 90% auto;
padding-top: 15px;
}