I put this together to display a background on the left and right side of a website.
Now with this in place the body container is appearing much wider than it was before. Why would this be?
Can anybody see what isn't good code in the below?
div#multi-background {
width: 100%;
height: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
#media only screen and (min-width: 481px) {
//Happens when the screen size is >= 481px
div#multi-background {
width: 100%;
height: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 481px) {
//Happens when the screen size is <= 481px
div#multi-background {
background-image: none;
}
}
Fiddle - http://jsfiddle.net/timsalabim/1mk097vb/8/
If I got it right, this would be the code you want:
#multi-background {
height: 700px;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
#media screen and (min-device-width: 481px) {
/*Happens when the screen size is bigger than 481px */
#multi-background {
width: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
}
#media screen and (max-device-width: 481px) {
/*Happens when the screen size is lower than 481px*/
#multi-background {
background-image: none;
}
}
<body><div id="multi-background"></div>
The comments were not written with "/" and "/". There were problems with #media declaration and height issues for more than 481 px.
Hope it helps.
Related
I have this HTML:
<div className="img" />
with this Css:
.row2 {
position: relative;
width: 1790px;
height: 983px;
background-image: url("/img.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #d0c6b5;
background-blend-mode: multiply;
#media (min-width: 375px) and (max-width: 414px) {
}
}
and i`m going to use media query to show only this part of the screen.
how can i do?
For responsive designing's you will not be able to get the exact crop for all the dimensions. However you can use px to get almost the same crop for the devices.
Mainly you have to play around the background-position attribute. See reference code below
#media (min-width: 375px) and (max-width: 414px) {
width: 350px;
height: 600px;
background-image: url('https://i.stack.imgur.com/aIWX6.png');
background-position: -950px 0;
background-size: 650px 100%;
}
There is a lot of code in this one, so I'm going to put it in a codepen.
https://codepen.io/anon/pen/WMyQEJ
Basically I am using #media queries to extend the #about div to be taller as my content is literally going into another div on mobile devices. I need the blue background to extend below the placeholder image so it's all in the same section.
Media Query:
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: 120vh !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
Change the height to auto
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: auto !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
Was trying to make my clickable background image responsive on all devices but can seem to wrap my head around it. It is showing well on 10" and above screen devices but on lower screen devices, the image is chopped off. I will like to make it responsive on all devices. Any heads up on this will be appreciated.
The code used is found below:
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Well you can change background-position to 100% as below in media query, this works fine, but this make your image as fixed background on mobile device compare to other visual result on other device.
body{
margin:0px;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Use contain property instead of cover if you want to see full image in background.
*{
margin:0;
padding:0;
}
body,html{
width:100%;
max-width:100%;
margin:0;
padding:0;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 100vh;
width: 100%;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>
Try adding this to your media query:
#media only screen and (max-width: 767px) {
#range-logo {
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:contain;
}
}
I've encountered an odd issue. I've been building this website using bootstrap3 and everything seems to work fine, until I try it on the iPad or iPhone. My background image seems to be rendered wrong. It is stretched way too much and you have to scroll 10 times until you reach the first content.
This is my website where the issue is found: www.socialook.net
Here is the CSS for the section with issues:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}
UPDATE: I changed height:100% instead of height:100vh and nothing really changed in ipad or iphone. The image is very zoomed.
Also, eliminating the height completely will cause the background picture to have a height of only about 5px. Any ideas?
I've found the following solution to fix the ipad and iphone problem:
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 768px;
}
.ipadfix{
height: 300px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 1024px;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 320px;
}
.ipadfix{
height: 150px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 568px;
}
}
Changing height from 100vh to 100% loses the scrolling bug:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;
}
but then your background-image is still not displayed correctly. I'm looking for a way around this.
UPDATE:
This is the closest I've got in order to get the image to look 'normal':
#media (max-width: 425px) {
#home {
background-size: 100% 14% !important;
zoom:1;
}
}
I want to have a border along with the background in my website, when the screen size becomes larger than 1024 pixels.
I have used this in my code:
(max-width: 1024) { background-image: url("Gutter.png"), url(Background.png);
background-position: left, center;
}
But only the background appears even in screens larger than 1024 pixels.
The proper format for a media query is like so:
#media all and (max-width:1024px) {
#selector {
background-image: ...;
background-position: ...;
}
}
#media (max-width: 1024px) {
#elementID {
background-image: url("Gutter.png");
background-position: left, center; }
}
Since your "border" isn't a true border, but a background image, you need to redefine your background within the media query (since you can't remove just one of the background images).
http://cssdeck.com/labs/kfoaijgc
.foo {
background: url(http://placekitten.com/300/400) center center no-repeat;
}
#media (min-width: 1025px) {
.foo {
background:
url(http://placekitten.com/300/400) center center no-repeat,
url(http://placekitten.com/100/100) repeat-y, /* left "border" */
url(http://placekitten.com/100/100) top right repeat-y; /* right "border" */
}
}
If you were using a true border, then the solution would be simpler:
.foo {
/* no border here */
background: url(http://placekitten.com/300/400) center center no-repeat;
}
#media (min-width: 1025px) {
.foo {
border: 1px solid;
}
}