I have used a bootstrap 4 template then edited it to fit my design. It is almost completely fully responsive except for one aspect. I have a background image as a main header image. It is responsive except when on mobile. I was wondering how I can make it fill the mobil screen while also shrinking to show the image.
header.masthead {
padding-top: 10rem;
padding-bottom: calc(10rem - 56px);
background-image: url(../img/fg-heads-nologo.png);
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
header.masthead hr {
margin-top: 30px;
margin-bottom: 30px
}
header.masthead h1 {
font-size: 2rem
}
header.masthead p {
font-weight: 300
}
#media (min-width:768px) {
header.masthead p {
font-size: 1.15rem;
}
}
#media (min-width:992px) {
header.masthead {
height: 100vh;
min-height: 650px;
padding-top: 0;
padding-bottom: 0
}
header.masthead h1 {
font-size: 3rem
}
}
#media (min-width:1200px) {
header.masthead h1 {
font-size: 4rem
}
}
<header class="masthead parallax smooth-scroll text-center text-white d-flex col-xs-4">
<div class="container my-auto">
<span></span>
</div>
</header>
Thanks!
Use below properties in your CSS
background-size:contain;
background-position:center;
Try this->
#image {
float:left;
width:100%;
height:400px;
background: url('https://salemnet.vo.llnwd.net/media/cms/CW/faith/36525-Jesus-Jesussitting-painting-thinkstock.1200w.tn.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="image"></div>
Related
For some reason, my background image is not staying centered when viewing from my phone, but when viewing mobile screen sizes from my desktop browser using the toggle device toolbar in Chrome Dev Tools it stays centered.
body { padding: 0; margin: 0; }
h1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 50px;
font-family: "PPWoodland-Bold";
color: #18454A;
animation: drop 1s linear;
padding: 1rem 0 0;
margin: 0;
}
#banner {
width: 100vw;
height: 100vh;
background: url("https://cdn.shopify.com/s/files/1/0099/7795/4368/files/banner-stripped.png?v=1633873595") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media (max-width: 749px) {
#banner h1 { font-size: 32px; }
}
<div id="banner-wrap">
<div id="banner">
<h1 id='banner-title'><span>Lorem Ipsum</span><span>dolor sit amet</span></h1>
</div>
</div>
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;
}
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 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.
I have a container and i have two sections that i want to display one at a time. something like a scrolling webpage like This!
Basically how do i make the first div element (section) have its own background that fits to screen and the second section should have just a blank screen. Thank you very much ! please examples will be gladly appreciated :)
This is my css:
* {
box-sizing: border-box;
/* look this up */
}
body {
margin: 0;
}
/* style what the sections have in common */
.container {
width: 100%;
float: left;
top: 0px;
left: 0px;
text-align: center;
padding: 1em;
}
.about {
float:left;
height:auto;
width:100%;
background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
/* target specific sections */
.heads {
background-color: red;
float:left;
height:auto;
width:100%;
}
This is my Html:
<body>
<section class="container about">
About
</section>
<section class="container heads">
About
</section>
</body>
.container{
width: 100%;
float: left;
text-align: center;
padding: 1em;
background-position: center;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
.about{
background: url(10.jpg);
}
.heads{
background-color: red;
}
You should set your body and HTML height to 100%:
body, html {
height: 100%;
margin: 0;
}
Then change your .about to:
.about {
float:left;
height:100%;
width:100%;
...}
NOTE: If this is what you were looking for please remember to mark it as correct.
add this in your .about class
background-size:100% 500px;