I have a site where im using a div as a background(as oppose to putting it in the body as I need to center it properly)
Here is the site, http://asystec.hailstormcommerce.com/
Here is the css:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.backgroundwrapper {
background-image: url('images/asystec-mobile-bg.jpg');
background-position:center 188px;
}
}
.backgroundwrapper {
background: #fff url('images/pageBgOld.jpg') no-repeat;
background-position:center 188px;
height:1903px;
width:1903px;
}
Ive tried clearing cache on browsers, but it is definitely loading the pageBgOld image as oppose to the new one.
Any help would be great.
Write media query after your main style. Write like this:
.backgroundwrapper {
background: #fff url('images/pageBgOld.jpg') no-repeat;
background-position:center 188px;
height:1903px;
width:1903px;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.backgroundwrapper {
background-image: url('images/asystec-mobile-bg.jpg');
background-position:center 188px;
}
}
Related
I would like to change the background based on a boolean.
If I have two backgrounds in CSS:
.background {
background-image: url('../assets/images/Background.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 670px;
#media screen and (min-width: 1920px) {
background-size: 100% 800px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 1200px;
}
}
.performance-background {
background-image: url('../assets/images/Background-performance.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 335px;
#media screen and (min-width: 1920px) {
background-size: 100% 325px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 325px;
}
}
I would like to use something similar to:
[ngClass]="{ 'background': displayBackground, 'performance-background': displayPerformanceBackground}"
Thank you so much.
You can add different classes depending of a boolean state using angular ngClass and a ternary operator in a HTML tag
example:
HTML:
<div [ngClass]="boolean ? 'trueClass' : 'falseClass'"> Example Text</div>
"boolean" is a variable and if it is set to true the html tag will use "trueClass" class, else "falseClass"
CSS:
.trueClass{
background: red
}
.falseClass{
background:blue
}
Good morning,
I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized.
On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown.
The media query I have works just fine. But it is not optimized.
Can anyone help me to get it optimized?
this is the query:
body, html {
height : 100%;
width: 100%;
margin:0;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.
body, html {
height : 100%;
width: 100%;
margin:0;
}
.Frontpage-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
You can check this answer.
Here are some tips to optimize this
Use Low size images
Use Low size videos or embed them from YouTube or Vimeo
Compress this CSS code.
У меня есть следующий код
.bg-if-premium {
background-image: url(photo_2021-05-22_20-40-40.jpg);
background-size: 100% 100% !important;
background-position: fixed;
background-attachment: fixed;
}
.bg-if-free {
background-image: url(photo_2021-04-16_16-43-00.jpg);
background-size: 100% 100%;
background-position: fixed;
background-attachment: fixed;
}
#media (max-width: 767px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
#media (max-width: 480px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
But on a mobile device, the background is still present. How to solve the problem?
#media screen and (max-width: 767px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
#media screen and (max-width: 480px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
Include the #media screen and (desired width) and like Mordred stated, separate the class identifiers by a comma.
Also since it looks like your working from a website first approach, you shouldn't have to include both of these screen queries. The first one will do the trick.
I'm trying to make a background image fill up (in height) when going mobile. When I make the browser smaller, it doesn't seem like my media queries are kicking in.
Here's what my css looks like:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row {
margin-top:200px;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
Here's the URL if you want to see what the page looks like:
http://www.gulflifehomes.com/
Change to background-position: center; and that should do the trick. Also, you should try and one-line your code when possible background: url(../images/cc.jpg) no-repeat center center fixed;.
If you want to test media queries on desktop, you should use min-width or max-width instead of min-device-width or max-device-width.
So do this:
#media only screen and (min-width : 320px) and (max-width : 480px)
min-device and max-device refers to the ACTUAL resolution of your screen (ie: 1280x800) instead of the size of your browser. This is why your media queries isn't kicking in when resizing browser and testing on your machine.
Remove the background-position rule or reset it to 0 for mobile if you still want it in place for desktop.
You have a lot of repetitive code there. You could just do this:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row { margin-top:200px; }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer { font-size:10px; }
#main { background-position: 0; }
#id{ margin-top:90px; }
#main .row { margin-top:100px; }
}
Here's the style.css where I've implement media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px)
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px)
body {
background: #b5ebf9 !important;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px)
body {
background: #b5ebf9 !important;
}
/* Landscape phones and down */
#media (max-width: 480px)
body {
background: #b5ebf9 !important;
}
And I've added this in the HTML, for it to detect (I think this is right):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And obviously, linked to the above CSS file in the header.
But for some reason, the background image ALWAYS displays, instead of the colour #b5ebf9.
What am I doing wrong?! I've spent 1-2 days on and off trying to fix this! I tried...
Making separate CSS sheets for each device , linking to those style sheets with the media tag included (no reaction whatsoever)
Also tried removing the first body query from the above CSS - which just keeps the backgrounds in that color, across all devices, no background image at all! (I want the background image to show up on desktop screens.)
Please help!
You need those {} to regroup media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px){
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
body {
background: #b5ebf9 !important;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px){
body {
background: #b5ebf9 !important;
}
}
/* Landscape phones and down */
#media (max-width: 480px){
body {
background: #b5ebf9 !important;
}
}
Can you try this:
#media only screen and (max-width: 979px) and (min-width:768px) {}
#media only screen and (max-width: 767px) and (min-width:481px) {}
instead of just #meadia