I'm having a problem with background image scaling in Safari (specifically on the iPhone).
Here's how it looks on iPhone:
Here's how it should look (at least):
Here's the CSS code:
#home {
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
text-align: center;}
img {
vertical-align: middle;
max-width: 100%;
height: auto; }
I forgot to mention that "home" is the "id" of a <section> tag. The idea is to use an image background for this "#home" <section>.
I don't have safari, Try it:
#home {
height: 500px;
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
position: relative;
text-align: center;
}
Related
#Preface I am relatively new to HTML and CSS if this has been answered elsewhere I would appreciate direction to something that gives me a solution.
Below is the code I have, I want the .Divclass to appear infront of my backround element with it's red background.
* {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
Check the below snippet. The div is in front of the background image with a red background.
Let me know if this is what your desired output is
section {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
padding: 10px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
background-color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
<section>
<div class="divclass">Hi</div>
</section>
*{
background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
/*color: red; This only makes the text color red */
background: #f00;
border: solid 1px rgb(253, 253, 253);
display: flex;
align-items: center;
justify-content: center;
font-size: x-large;
}
<div class=divclass> Hi </div>
Note the display: flex that was added to center the text, rather than using text: center which won't center it vertically.
How do can I get the background image look like it's being shown on the phone? So I have the iPhone masked and I want to put an image on the screen of the phone. How do I do this? I tried playing with z-index but it doesn't work. Here's what I'm trying to achieve
div{
width: 302px;
height: 605px;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: relative;
z-index: 2;
}
.background{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 265px;
height: 571px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: 265px 571px;
}
<div>
</div>
<div class="background"></div>
The problem you were having is that the div styles you applied to the phone were also being applied to the .background. By giving the phone it's own separate class you can style them individually.
I've updated your example below.
.phone {
width: 302px;
height: 605px;
background-color: white;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: absolute;
z-index: 2;
}
.background {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
width: 280px;
height: 580px;
border-radius: 10px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: cover;
}
<div class="phone"></div>
<div class="background"></div>
I have set a background image. I need that to be responsive. I have used media queries for that, but the image is the same. Should I use background-size or width and height to view it?
As in it gets cropped off. I tried the background-size:100% 100%, but it looks stretched.
The code is given below:
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat;
background-size:100% 100%;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
z-index: 1;
}
.overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #000000;
opacity: 0.4;
}
make background-size: cover and background-position: center
.header-area {
background-image: url("image url");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thank you.
I've found the answer.
just needed to modify the code a bit.
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat center center fixed;
background-size: 100% 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
removed the media query and used this.
I've been trying to get a full screen background in the header tag but for some reason it doesnt show?
Code
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header></header>
You are missing height:100% in header but even so it won't display because this a child of body and html you need to give height:100% and width:100% to parents (body/html)
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
Another approach is using 100vh
body{
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100vh;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}
if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis
Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}