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>
Related
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>
I'm trying to create slider backgrounds. Basically create a container and put couple images inside of this container, each image is a responsive background for the whole page. In result we can have multiple backgrounds and a slider to change them. Well if I put all measurement in px than everything is work.but as soon I put in percentage since it suppose to be a responsive design. It get me instead of horizontal scroll a vertical one.
Something like that:
<div class="slider-wrap">
<div class="slide" id="slide-0">
</div>
<div class="slide" id="slide-1">
</div>
</div>
css:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 10px;
color: white;
margin: 0;
padding: 0;
outline: none;
text-decoration: none; /*clear href decoration*/
}
body {
margin: 0px auto;
min-height: 100vh;
}
.slider-wrap {
width:100%;
height:100vh;
min-height: 100vh;
overflow-x: scroll;
}
.slide {
display: inline-block;
width: 100%;
min-height: 100vh;
float:left;
}
#slide-1 {
background-image: url(img/m_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#slide-0 {
background-image: url(img/b_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
So how to make a multiple background images with horizontal scroll
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 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.
Ok, so I have a background image using the background-size: cover. Now I know IE does not like it. So I am trying to implement some of the methods it discusses on this page: http://css-tricks.com/perfect-full-page-background-image/ using a CSS file for IE. I want my background-size:cover to stay the same for all browsers but IE and then an IE CSS to kick in for IE browsers so it has the same look and feel. The solutions I tried are not working. Please help. My portfolio page url is: http://spenry.mydevryportfolio.com/portfolio/
The header/background image HTML (I added the Div and IMG here to kick in for my CSS IE but in other browsers I have in my regular style sheet to hide the contents of this div because in other browsers my image is displayed through my CSS below as a background-size cover)
<article class="fullheight">
<div id="bg">
<img src="builds/images/gallery/web_photo.jpg" alt="Girl shooting an arrow with her bow">
</div>
<div class="hgroup">
<h1>Bowpen Designs</h1>
<h2>Aim Your Sites</h2>
<p><img src="builds/images/misc/arrow.png" alt="down arrow"></p>
</div> <!-- hgroup div -->
</article> <!-- fullheight -->
CSS:
header .fullheight {
background:url(../images/gallery/web_photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#bg {
display: none;
}
header .fullheight .hgroup {
padding: 100px 0;
}
header .fullheight .hgroup h1 {
color: #FFFFFF;
font-size: 5em;
font-weight: 900;
line-height: 1.15em;
text-shadow: #000000 0 0 20px;
text-align: center;
}
#media (max-width: 650px) {
header .fullheight .hgroup h1 {
font-size: 2.5em;
}
}
header .fullheight .hgroup h2 {
display: block;
color: #FFFFFF;
width: 60%;
max-width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid #FFFFFF;
margin-top: 15px;
padding: 10px;
font-size: 1.3em;
background: rgba(18, 64, 133, 0.5);
}
header .fullheight .hgroup p {
text-align: center;
}
header .fullheight .hgroup p img {
padding-top: 50px;
max-width: 50px;
}
Here is the CSS for my IE CSS - I've attempted two of the different methods here from that site but I should probably delete one. But neither worked by themselves in IE as I tried both. I must be doing something wrong.
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.fullheight {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg',
sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg', sizingMethod='scale');
}
Hopefully this will help you. I had a project, which required a background image and I too wanted it to work in all browsers. Here is how I got mine working
css:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Can you please try
background-size: auto