I am using Bootstrap and have an image 1920x1280. It is currently responsive only till about a width of 1000 px and stops shrinking from there. Width below 1000 px, it starts to cut off the side of the image. I need the full image to be visible on any device. I am adding the image via CSS background url. Is there a way around this. Added the relevant code below. The image is placed within the ID 'intro'.
Image
HTML
<div id="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 style="color: #000000">Title<span class="brand-heading">Quote</span></h1>
<p style="color: #000000" class="intro-text">Short description</p>
Learn More </div>
</div>
</div>
</div>
</div>
CSS
#intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center fixed;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#intro .intro-body {
display: table-cell;
vertical-align: middle;
}
#intro .intro-body H1 {
font-size: 76px;
font-weight: 700;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
}
#media(min-width:768px) {
#intro {
height: 100%;
padding: 0;
}
#intro .intro-body .intro-text {
font-size: 18px;
letter-spacing: 1px;
margin-bottom: 100px;
color: rgba(255,255,255,0.9);
}
}
background-size: cover; try to fill all background space so maybe cutoff edge of image. If you will show image completely without cut off set background-size to contain.
background: url(../img/intro-bg.jpg) no-repeat right bottom scroll;
background-color: #31f1fd;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
Please try this Style instead of your id intro. There are two methods. One is with fixed height and width the other one is without width and height.
#intro{
width: 100%;
height: 400px;
background-image: url('../img/intro-bg.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
or
#intro{
background-image:url('../img/intro-bg.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
Related
I wanna know how I can make the div's background responsive
My code:
height:500px;
background-image: url(../images/Doctor.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
The result:
When i zoom out :
The problem is when I zoom in or out I want the doctor image fixed in zoom not in scroll
In order to make it responsive, try the following snippet. Do not set width, height, or margins.
body {
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
span {
color: tomato;
font-weight: bold;
font-size: 2em;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
}
<span>Responsive Background<br/>Image</span>
try this
height: auto;
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
I am building a website where I want the background image to be attached fixed.
I have achieved this in desktop browsers with the CSS below, but it doesn't work on Smartphone.
This is a known bug with background-attachment: fixed.
I don't know how to fix it.
#page-header{
height: 300px;
background: url("../img/wood.jpg");
background-attachment: fixed;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
}
My HTML
<header id="page-header">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<h1 id="h1header">Products</h1>
<p>Local, Organic, Tasty</p>
</div>
</div>
</div>
</header>
You can find my website at http://maisonbergeret.com/product.html
My question is how can I keep the exact same effect.
This is what I changed for page-header.
#page-header:before{
content: "";
width: 100%;
height: 300px;
position: fixed;
background: url("../img/wood.jpg")no-repeat center center;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
z-index: -10;
display: block;
left: 0;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Below the header, I have a section product with id="products"
section#products{
background-color: #FAEBD7;
}
Same color as my body background-color: #FAEBD7;
Adjusted margins and now it works.
I have a problem with my website. The picture looks great on the desktop but on my phone it looks terrible because its zoomed in.
How can I solve this?
It don´t work with
background-size:cover;
The div with the background have two classes
.content{
color: white;
font-family: "Another Typewriter";
width:100%; height:1000px;
font-size: 300%;
padding-left: 15%;
padding-right: 15%;
padding-top: 10%;
text-align: center;
background-size: cover;
}
.parallax{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#xyz{background-image: url(URLtoimage);}
Div Container:
<div id="xyz" class="parallax content">
<legend class="text-center content-headline">XYZ</legend>
Some text
</div>
How I've assumed you're using background-attachment: fixed; , it can't work on many mobile browser you must use media query to change it on scroll for little screen.
.parallax{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 600px) {
.parallax {
background-attachment: scroll;
}
}
Maybe you could change it to background-size: contain when the screen width is smaller than 767px
use background-size:100% 100%; Check the snippet view.
body{
margin:0;
}
.bg-img {
background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center;
background-size: 100% 100%;
min-height: 100vh;
width: 100%;
}
<div class="bg-img">
</div>
I've got this code (with no header-image visible) so far:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
If you give the header-image a fixed size of 248px you can see it appear. Example with visible header-image:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 248px;
border: 3px solid white;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
Is there a way to make it appear without using a fixed height?
Like when using a classic img-tag with just src- and alt-attribute. Then height is read out of the image-file self.
I would like to avoid fixed heights in there because if the image changes then it becomes all wrong.
I think you have to define a height if using background-image. Might be better to use img tag and just put a width of 100%, like so:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
border: 3px solid white;
}
img {
width: 100%;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header">
<img src="https://placebear.com/940/248" alt="Bear Image">
</div>
</div>
</div>
I want to keep a div from moving up on mobile devices with smaller widths. I realize I could do it with media queries but I feel there is likely a cleaner way.
.wrapper {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 23%;
overflow: hidden;
text-align: center;
}
#titlebackground {
background: rgba(0, 0, 0, .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: relative;
top: -50px;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>
How do I raise the title so that it is higher than the center of the div, but prevent it from moving up even higher on lower resolutions?
Edit: to reproduce: run code snipped on full screen and then change screen width.. The div moves up the smaller the screen goes.
Your .wrapper has a percentage padding padding-top: 23%, so at mobile that is gonna be alot less than at desktop you can put a fixed px padding so it's the same across all devices.
.wrapper{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 100px;
overflow:hidden;
text-align: center;
}
You can use css vh instead of percentage and then give your desire value to it. vhis measured regarding to the height of device.
.wrapper {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 65vh;
overflow: hidden;
text-align: center;
}
#titlebackground {
background: rgba(0, 0, 0, .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: relative;
top: -50px;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>
Use absolute positioning. It's exactly what you're looking for:
.wrapper{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;
text-align: center;
}
#titlebackground {
background: rgba(0 , 0 , 0 , .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: absolute;
bottom: 65%;
width:100%;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>
EDIT: Using vh as units for the padding is also possible, but won't work in all browsers, specially the old ones.