I'm really new to coding and I am having some trouble.
I want to put a background image under all of my page elements that fits the entire screen. But when I try to do so the white coloring that is apart of all of the p's and h's that I've added overlap the image making the page look funky. Only part of the page gets the background image.
Here's the code I added to the css file.
html {
background: url('imgurl') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
The html and css files are undoubtedly linked. Also, I used imgurl in my example code, but the actual code links to the right url.
Can't tell without showing a fiddle.
My guess will be doing this so it removes the background on the elements you mentioned.
h1, h2, h3, p {
background: none;
}
one of the easiest ways to accomplish this is to use the following css
#backgroundImage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
and here's a fiddle: http://jsfiddle.net/usrp7yom/
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;
Heres my website: www.ChrisStephensMusic.net
As you can see the background image is not full size and moves when the page is scrolled. I'd like it to be full size and remain still while the content scrolls. I've tried the CSS suggestions I could find when searching this topic here but they do nothing when I add them to the "Custom CSS" on Blogger. Is there a better way to fix this using HTML or is there something else I need to do to get the custom CSS to be recognized?
Try using this code in your css file for the background image:
width: 100%;
background-size: cover;
background-attachment: fixed;
CSS
html {
background: url(image.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source: https://css-tricks.com/perfect-full-page-background-image/
Add the following CSS -
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
The custom CSS option is not working because some invalid rules have been added to it, which is causing every rule after that to be ignored. I would instead suggest, adding this via HTML/JavaScript gadget by wrapping the code in a style tag so that it looks like
<style>
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
</style>
The final result should look like -
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 have a background image that re sizes with the window. I want the words on my background image to represent links. My idea was to create divs that were empty and transparent and position them over the words in the background image and when that div was clicked, the corresponding link would be activated.
I am having trouble positioning my divs. I can't seem to get them to stay aligned with their word in the background image when the window is re resized.
HTML:
<div id="wrapper">
<div id="bespoke">
I want this to always be aligned with "Bespoke" in the background image
</div>
</div>
CSS:
html {
background: url(main.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
}
#wrapper {
position: relative;
top: auto;
margin: auto;
text-align: center;
height: auto;
}
#bespoke {
}
Demo:
http://jsfiddle.net/DzC3V/1/
Note: if jQuery is the best way to accomplish this, I don't mind using it.
In my opinion you won't need jquery. CSS and positioning with percentages should do the trick.
Try the following
#yourObeject {
position: absolute;
top: 30%;
left: 30%;
}
it's tricky to position your div properly. but it should work
if this doesn't fit your needs you should really try doing an image Map and resize it with jquery
i think the best way to do this is to use media queries, its a bit of a drag, but it will work
You can set the image in a div
And you can put the empty div on top of it using the z-index:1
So u have better control on both
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