I'm having trouble with two of my divs not showing in Safari. They show fine on Chrome and Firefox. The buttons with the class .phquote and .designquote are not showing on the first page. Here is the link to my website to inspect http://shellhammersara.se
I've tried to see if anything is wrong with the images, but that isn't it. I tried taking them out and just added a background color to the div and it still wouldn't show.
Can anyone please help me with this issue?
Below is my code:
HTML
<main>
<div id="homebanner">
<div class="bannerbuttons">
</div>
</div>
</main>
CSS
#homebanner {
background-image: url("Images2/home.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
margin-top: -33px;
}
.contactbtn {
display: none;
}
.bannerbuttons {
width: 55%;
margin: 0 auto;
}
.phquote {
float: left;
width: 50%;
height: 45%;
margin-top: 40px;
background-repeat: no-repeat;
background-image: url("/Images2/ph-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.phquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/ph-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote {
float: left;
width: 50%;
height: 45%;
margin-top: 190px;
background-repeat: no-repeat;
background-image: url("Images2/design-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/design-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
In my case,sometimes when using flexbox safari messes up.
Giving flex a value solved the problem for me, e.g. flex: 1 0 auto
Try add "height:100%" to .bannerbuttons class
Related
I'm trying to center and cover an image up the whole screen which is coming from the Unsplash Source API.
I think because the image actually gets fetched after the CSS is already applied it doesn't work just like that:
(If the demo might appear covered up run it in full-screen)
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
}
<div class="centered-image"></div>
Do you guys know a work-around?
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
background-repeat: no-repeat;
height: 100%;
background-image: url(https://source.unsplash.com/collection/1228371);
}
Made some CSS Changes. Give this a try.
I am editing a websites original theme, and have presently run into an image that is cropped vertically inside a div
See codepen or example below: https://codepen.io/hioioasd90/pen/LzvmpW
I would like for this image to display in its entirety, but be scaled to the outside containers set width.
After editing the chrome console, changing height: 27vh; to a larger number will result in the image showing more inside the div, however it beings to go beyond the boundaries of the max width.
.container {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.img-cover-category {
background: none no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
</div>
Depending what you would like to achieve, first you could delete doubled:
background-size: cover; // this is doubled in the css code
and add:
background-size: contain; // new version for every browser
And from this point try to adjust the size of the image.
Here is what you can delete:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
And paste this instead:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
margin-bottom: 0px;
}
Then if the scaling should leave the image fixed to the top and not center in the middle you can change this:
background: none no-repeat top;
ADJUSTMENT TO NEW SITUATION vesrion A
Instead of adjusting height of the image set a height of the container
.container {
max-width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
border: 1px;
border-color: #000;
border-width: 1px;
border-style: solid;
}
.img-cover-category {
background: none no-repeat top;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 100%;
width: 100%; /* Currently this seems to be obsolete */
margin-bottom: 0px;
}
Also adding min-height: lets say 1000px to the .img-cover-category seems make the background visible aswell...
To be honest I don't know what this will be a header, a background - maybe you could add a normal image instead of background.... if you want it to be visible all the time...
I'm trying to fix the background image. On other devices is displayed well... but in Safari iOS looks very ugly. The code is as follows:
.main {
background: url('imgs/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Thus it is seen:
The code is here: https://github.com/lozanotux/lozanotux.github.io
SOLUTION (CSS):
.main {
background: url(../imgs/bg.jpg);
background-color: #444C5C;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
zoom: 100%;
}
My question is about "background-image" in CSS. How can I add "background-image" in full screen? I used "width: 100% " but it doesn't work.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body {
background: url(http://i.imgur.com/aZO5Kolb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
html {
height: 100%
}
I'm trying to cover up a html body background image by another image. I used z-index but can't get it working. Am I missing something or just can't understand what I'm doing.
See sample code below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://lorempixel.com/output/food-q-c-640-633-1.jpg');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}
.content {
/*height: 700px;*/
height: 100vh;
background:rgba(255,255,255,0.5);
/*margin-top: 20%;*/
}
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
Additionaly, inside the main-content are divs with 100vh and
background opacity
Main content images should be on top of everything including the content div with background opacity.
Use 100% width and height on #main-content, like:
#main-content {
width: 100%;
height: 100%;
}
Have a look at the snippet below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
width: 100%;
height: 100%;
}
<div id="main-content"></div>
Hope this helps!
It will work if you define a height for the div with CSS. Or insert content so it will expand vertically.
A background image makes sense for an element that contains more content, otherwise you can insert the image with <img>
You mean something as below, if so then set #main-content height:auto and it works fine, if you set height:100% then it takes that as 100vh, which on scroll hides image placed at top, so try as below.
So now #main-content height:auto calculates and takes height assigned to child elements present inside it and the background image which is assigned to this div #main-content can be seen only till height of 100vh, after that the default image that is assigned to body get visible.
body, html {
margin: 0;
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:auto;
}
.content {
height: 100vh;
background:rgba(220,60,60,0.6);
color:#fff;
}
<div id="main-content">
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
</div>