I know how to use the :before selector on tag such as p or span, but how does it work on the body tag?
This is my CSS:
body {
background: #3E3E3E;
background: url([my-bg-img-url].jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
height: 100%;
padding: 0px 0px 0px 0px !important;
margin: 0px;
font-family: 'Open Sans';
font-weight: 300;
}
#media only screen and (max-width: 1024px) {
body:before{
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url([my-bg-mobile-img-url].jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Questions:
1) How does :before work in this case?
2) With this css code my recaptcha v2 pop up window ("select all images with...") cannot be scrolled on mobile (it is cut-off). If I remove the first position:fixed, even if the second one is in place, recaptcha works. Why does the first position:fixed create that bug on recaptcha?
3) I read that ::before is for CSS3 and :before is CSS2, which one should I use for a compatible website?
1) How does :before work in this case?
The <body> is unique, but it is just a HTML element, and you can have pseudo elements in it.
2) With this css code my recaptcha v2 pop up window ("select all images with...") cannot be scrolled on mobile (it is cut-off). If I remove the first position:fixed, even if the second one is in place, recaptcha works. Why does the first position:fixed create that bug on recaptcha?
I don't think it's caused any bugs. position: fixed is relative to the viewport, with width: 100% and height: 100% it covers the whole viewport completely and does not move with scrollbars.
3) I read that ::before is for CSS3 and :before is CSS2, which one should I use for a compatible website?
They work exactly the same, but :before with just one : works in more browsers (e.g. older version of IE).
Related
CSS background is not covering whole viewport width while using media query #media (max-width: 62.5em)
I tried using background-size: cover, background-position: top left, background-repeat: no-repeat but still nothing works.
here's main CSS styles of that section.
max-width: 100vw;
min-height: 100vh;
background: url(../images/bg-hero-desktop.svg);
background-color: #ebfbff;
background-size: cover;
background-repeat: no-repeat;
padding-top: 20rem;
padding-left: 5rem;
This is a fairly common error that I experience at times while working on layout.
The problem is NOT with the background of the html component, but rather with the layout on your footer, and your footer-cta-box div. These elements are pushing the layout outside of the viewport which is what is making it appear as though the background for the html is not rendering correctly. If you use "Inspect" in your browser to temporarily take out those elements you will see that the html background renders correctly! You're doing things right!
I'm not sure exactly how you want the footer and footer-cta-box to be laid out on the page, or else I could help you to get them in the right place, but those are the culprits of the problem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
background-size: cover;
}
main {
color: white;
}
<main>Hello world</main>
try
background-size: contain;
or
background-size: 100%;
instead of
background-size: cover;
I am attaching the 2 sample images I am using so you can get the idea.
This is the body background:
This is the fixed position div's background:
And above those two there is the content. The whole website. Between those two there are some moving stars in pure css with no interaction.
But here comes the problem. While the user scrolls the fixed background breaks in parts, stucks in positioning and sometimes the body background image disappears and shows only color in the back - all that while scrolling.
body {
font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
line-height: 21px;
color: #636e7b;
overflow: hidden; /*removes it after preloader quits*/
position: relative;
background: #1d2939 url("../images/backgroundv2.jpg") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
#fix {
background: transparent url("../images/backgroundv2.png") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
-webkit-transform: translateZ(0);
}
Any idea will be appreciated.
(This is the bugged version http://i.imgur.com/bn0fG3j.jpg while scrolling)
well, I played around with your code,and it works as you intended, I would probably have done it in some other way, the code seems a bit messy but it does what you trying to achieve, check this fiddle:
http://jsfiddle.net/domusnetwork/Lkrkp/
and maybe tell me if I misunderstood you.
anyways..
I think that your problem comes from the elements you've stack on top of your background,
try using the next code snippet, it's worth a shot:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and if that won't help try implementing one of the techniques in the next article:
http://css-tricks.com/perfect-full-page-background-image/
have a nice day :)
Thank you for the answers.
Fortunately I've found the problem. It was the moving stars. They were made by idea from codepen's author using simple css with massive ammount of box-shadows as dots in 3 divs (sizes). Due the high ammount of stars it requires a lot of painting on the page while scrolling. When I removed one of the star sizes the scrolling is fine, the background stopped disappearing and it's all fine.
Seems like performance has to be above all.
I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.
I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:
#div5 {
height:100%;
width:100%;
position: relative;
background-image: url("img/background.jpg");
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.
At the same time, page 4 has the following css:
#div4 {
min-height:100%;
width:100%;
background:url(img/portfoliobg.jpg);
overflow: auto;
background-size: cover;
}
and this works like a charm.
So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?
Use another div with position:fixed to make the background fixed.
Like this:
http://codepen.io/anon/pen/OVebNg
JADE
.fixed
.bgcover
SCSS
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bgcover {
background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
}
Hope this help.
Short answer: you can’t (for now).
You can play with #media screen and (max-width: 1024px) {} but for now iPad Pro have resolution more then ordinary monitors.
I offer you to disable fixed attachment for mobiles via this way:
Main CSS file:
.parallax {
background-attachment: fixed;
background-size: cover;
}
Main HTML
<script type="text/javascript">
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
}
</script>
Additional fixparallax.css
.parallax {
background-attachment: scroll !important;
}
That is my client website- http://rubowarkitekter.dk/
I already code to make background image height & width according to adjust screen size/100% height & 100% width. But that is not work on IE11.
My css code-
.home {
background: url(http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg) center center no-repeat fixed;
background-size: cover;
z-index: -500;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale');/* To make IE work */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale')"; /* To make IE work */
}
Any idea how can i make background image to height & width 100% on IE11.
Thanks
IE11 screenshot-
The issue here is that the image is not a background image. From your code-
<img src="http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg" class="home">
This is an image element and not a background image added in CSS.
What you should instead be doing is adding the background image either to the "body" element or to your div wrapper.
There are a number of recommendations I feel it important to make-
Use the HTML 5 doctype rather than XHTML transitional
Remove the oncontextmenu event handler on your body element - it will not prevent someone saving your images if they want to, but will annoy your users.
Validate your site, there are 33 errors on the home page - which will mean inconsistent results in browsers for your users. Your site does not work correctly in Google Chrome.
Organise your CSS, I cannot see that code you cited is actually exists in any of the loaded stylesheets (is it currently dev only?).
Where-ever you use vendor prefixes (the -moz, -webkit etc.) these should appear before the standard property (without the prefix) so that it is used instead of the vendor prefix once the property is supported by the browser.
Clear your floats by using something like the CSS tricks clear-fix code. The social media widgets for example.
Do not use position:fixed or position:absolute for layout - you have not control over the viewport/device/window size your users are visiting on, so cannot assume a specific width.
Chris Coyier of CSS-Tricks proposes 3 great solutions which works quite well, 2 of which being pure CSS.
You can read up on this here
Examples
Example 1 (fixed position -- ideal option)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Example 2 (inline image -- next best thing)
HTML
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
CSS
#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%;
}
Example 3 (uses filters -- less recommended)
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE fallback support */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
I have a large image I would like as my background, but for some reason it repeats a little bit on my large screen. Is there a way I can just have the image size up or down according to screen size?
EDIT: So I have changed my HTML to look like this:
<body id="wrapper">
<div id="body">
<img src="/images/sky2.jpg" class="stretch" alt="" />
</div>
and my CSS to this:
#body {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
And the background won't show on preview. I have 3 other div elements that show but only to a white background =/.
move background-repeat: no-repeat; to the #body instead of #body img
You aren't actually showing any of your html here, just some embedded CSS and some (I assume linked?) CSS. You are loading the image as a background-image on the body element in that first bit of css, which is great. Because it's loaded as a background-image in CSS, and not and tag in HTML, your second bit of CSS (with the #body img selector) is not affecting it in any way.
What you actually have, in effect, is this:
#body {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
position:relative;
background-image: url(images/sky2.JPG);
}
Which is a very odd bit of code. But the only relevant part to your question is the background-image part. The answer has several parts. In CSS2: no, you cannot adjust the size of a background image. You can set it not to repeat (as others have shown) and you can set it's position:
body {
background-position: center left;
}
In CSS3 you can change the size, and you have several options (you are looking for cover, I think) but it only works for the latest browsers. The property is called background-size, but because it is still experimental, you have to declare it individually for each browser:
/* this is the default */
body {
-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
/* this will size the image proportionally so that it is contained, but not cropped */
body {
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
/* this will size the image proportionally so that it fills all the area */
body {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* this will size the image as a percentage of the area */
.example #percent {
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
}
/* this will size the image to exact specifications */
.example #absolute {
-moz-background-size: 100px 25px;
-webkit-background-size: 100px 25px;
-o-background-size: 100px 25px;
background-size: 100px 25px;
}
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Demo page:
http://css-tricks.com/examples/ImageToBackgroundImage/
Source:
http://css-tricks.com/how-to-resizeable-background-image/
I think it's worth to read that page :)
1) The CSS property background-repeat: no-repeat; should be on the body element itself, i.e. on the element you're specifying the background of.
2) In the CSS, you write #body... I guess you want to talk about the body element? Then you should just write body in the CSS. #body would be for an element declared as, say, <div id="body">.
3) Also, I'm unsure about #body img. #body img means “an img element inside the body”. Do you really have an img element inside the body? I mean, is your markup like this?
<body>
...
<img ... >
...
</body>
And do you really want to style that img element?
Anyway, the style that applies to the img element has nothing to do with the body's background.
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}
</style>
You need to set it for the same element or class or whatever.
Also you could move the body css into your css.
Ok, I'm sorry there are some other things wrong, like #body {. I don't think you have an element with an id "body".
Not trying to RTFM, but maybe read some tutorials on CSS?
To scale the image, maybe have a look at: Stretch and scale a CSS image in the background - with CSS only