Hi i have a problem with my wordpress site - i used this css to change the background of page :
.page-id-689 #primary {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
min-height:100% !Important;
}
the problem is that the background wont show on the whole page ( Screenshot).
I already tried :
.page-id-287 #page_wrapper { height:100% !important; margin: 0px auto; }
html, body { height: 100% }
i also tried setting min-height to 100 % - wont work
!!! the problem is solved when i set the height to 1200px in #primary but it also causes huge problems in lower resolutions. Can someone help me with this ?
You should set height of all container elements to 100% down to html element http://prntscr.com/8o41id
background-size: cover; covers the size of the container. Looking at your site the #primary id is only going to be as large as the content within it. If you want it to have the same height as the image so it covers the entire page you need to set an actual height value. Try adding height: 802px; and it will fix it, as that's the height of the image.
If you want a more graceful solution add this to the body:
body {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center fixed;
}
And remove the background-color from .st-content.
If you want multiple pages to have different backgrounds you'll need to create a separate wrapper with a unique ID that runs the entire width and height of the page regardless of the content on it.
More information on background-size can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
In a <section>, I have a background-image with a fixed position, like this:
section {
background: url("/images/bergen_background.png"), rgba(0,0,0,0.5);
background-blend-mode: color-dodge;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
What I want is to have it scroll when it has reached the end of the <section>, and I've been able to add the JS logic to add a CSS class, section.bottom, which will remove the fixed property for the background.
However, when I remove the fixed property and scroll down, the background-size: cover seem to break and the background-image seem to not fit the entire image in the viewport.
section.bottom {
/* what do I add here? */
}
What do I do to have a background-image not-scroll and then scroll while having the background-image be fixed with regard to the viewport?
First image is before scroll reached end of the element, second is after scroll has reached the end of the element
Reproduced here:
https://svelte.dev/repl/04b96435904e4625a3ddbcc28bd7054f?version=3.38.2
I think that I have fixed your problem but not sure.
I just thinking about idea which might solve the problem my idea like below :
First : remove background-size: cover; and add
background: url(<image>) center top no-repeat fixed;
background-size: auto <width size in %>; /*Beacause background-size: cover;
creates the scrolling issue.*/
Second : with the logic JS you can change background-attachment: fixed; into background-attachment: scroll;.
I think now everything is good.
I am a student and I'm having an issue with one of the video tutorials regarding using a background image. I followed the code exactly as is in the video but it's not producing the same results. It just keeps showing the image tiled throughout the whole web-page. Any help would be appreciated.
<style type="text/css">
body {
background-image:url(goku.jpg);
background-repeat:no-repeat;
background-attachment: 50% 60px;
}
</style>
Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position
EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.
html,
body {
margin: 0;
height: 100%;
}
body {
background-image: url(https://placehold.it./240x180/fb4);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
<div>Test</div>
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
I'm not expert in CSS, so bear with me in advance if my question may seem silly to experts.
I'm trying to find out a way to make the product pages of my website look nicer when printed out.
To this purpose, I'm trying to add a background image which has a logo in the header, a footer and a message in the left side margin.
In order for these background elements to show, I've set the size and margins of the page in the custom.css file of my template (I'm using Joomla CMS). This is the code I used (which correctly does what I meant, that is, making the content appear within the set margins):
#page {
/* set size of printed page */
size:210mm 297mm;
margin-top:25mm;
margin-bottom: 12mm;
margin-right: 3mm;
margin-left: 8mm;
}
Then, in the .css file of the page I added this code:
body {
background-color: white !important;
background-image: url('/images/print/sfondo-pdf_v2.jpg') !important;
background-position: 0px 0px !important;
background-size: 100% auto !important;
background-repeat: repeat-y !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-attachment: scroll !important;
}
The problem is, the background is not contained in the total size of the page (i.e. 210mm 297mm), but it is instead contained within the margins previously set.
I would like to know what I should do in order for only the background to ignore the #page margins.
I hope I have clearly explained my point and thank you all in advance!
How can I make the first page of a one page website full height with a background image like this website? http://avathemes.com/HTML5/De7igner/image.php
Why not use the vh unit?
The vw and vh units stand for the percentage of the width and height
of the actual viewport. They can take a value between 0 and 100
according to the following rules:
100vw = 100% of viewport width 1vw = 1% of viewport width
100vh = 100% of viewport height 1vh = 1% of viewport height
.class_name
{
height: 100vh;
}
Looking at the website in the link provided, they have only put the background image on only a specific part of the website (the countdown time). So if you want to follow them, you can put the required area in a wrapper div and then use the css3 background properties.
.wrapper {
width: 100%;
height: 100%;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
If you want the whole page to have a background, then you can just change the .wrapper selector to body.
I am using the background-size property as in covered in this article http://css-tricks.com/perfect-full-page-background-image/, check it out. Here is the js fiddle http://jsfiddle.net/Br4fZ/ for what you wanted.