Re this site:
http://www.jenniferharper-deacon.com/
I have added background images using the following css:
#pl_areauzza45k .pl-area-wrap {
background-image: url("http://www.jenniferharper-deacon.com/wp-content/uploads/2015/01/WHEAT-FIELD.jpg");
right: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
However they seem to be pixelated on my phone. Any help on how to solve this would be very appreciates.
The reason is the image is getting shrunk.
Try this:
#pl_areauzza45k .pl-area-wrap {
background-image: url("http://www.jenniferharper-deacon.com/wp-content/uploads/2015/01/WHEAT-FIELD.jpg");
right: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-attachment: fixed;
}
Related
Map Page
Hi I'm making a map on my website and it needs to have icons on it that can be hovered which means they can't be apart of the actual map image itself.
I'm wondering how I would place the icons on the map and keep them in the same position on the map at different view widths/heights.
This is the CSS for my map background:
.background {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100vw;
height: 100vh;
background: url("../assets/map.png") no-repeat center center fixed;
-webkit-background-size: 100vw 100vh;
-moz-background-size: 100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}
The map will change size based on the resolution of the screen which makes it tricky for me to keep the icons in the same place through screen changes. Currently I tried using position absolute and putting it in the right place but as you change the screen so does the placement of the icon.
Am I doing it wrong or is there another solution to this? Thanks.
if you wanna position icons on a background then you have to give that background container a position relative and then give the elements inside background container a position absolute
body,
html {
margin: 0;
padding: 0;
}
.background {
position: relative;
width: 100%;
min-height: 100vh;
background-image: url('https://i.stack.imgur.com/KQxKh.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.icon1 {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon2 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #4AC144;
}
.icon4 {
position: absolute;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon5 {
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
<div class="background">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
<span class="icon5"></span>
</div>
How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Good morning,
I have a problem with scrolling my website on mobiles. I have set div height to 100%, but on mobile, it has height 'auto'. But still, when text is longer than the screen height, I am unable to read it. How should I edit it please? Thank you!
HTML:
<div id="about">
<div id="onas">
<div id="obsah">
<p> text text text....</p>
</div>
</div>
</div>
CSS:
#about {
background:url('images/bg-about.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
min-height: 100%;
width: 100%;
color: white;
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
z-index: 1;
}
#obsah {
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
color: black;
font-size: 21px;
}
#onas {
position: absolute;
font-family: cond;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, .5);
min-height: 40%;
}
#media screen and (max-width: 1024px){
#onas {
position: static;
margin-top: 200px;
padding-top: 15px;
width: 100%;
height: auto;
min-height: 40%;
}
}
Your problem is that you have:
position: fixed;
In your about, you were probably trying to apply it to the background.
Delete that line and it will scroll.
docs
On the homepage of http://www.jeroenvanderwaal.com i'm trying to get the background image to cover the whole screen. I am unable to find out why it isn't covering but leaving an empty space at the bottom. The code so far:
.page-id-4 #main {
background-image: url(http://www.jeroenvanderwaal.com/wp-content/uploads/2015/03/achtergrond2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 60px;
padding-bottom: 0px;
}
I only want the background on this page, hence the .page-id-4 . Is there any way to make it cover the whole screen?
Here you go, just set the background in a html tag
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;
}
If you prefer not to have all your sub pages to show the homepage background, you can do this:
html {
height: 100%;
}
body {
min-height: 100%;
}
body.home {
background: url(/wp-content/uploads/2015/03/achtergrond2.jpg) no-repeat center center fixed;
background-size: cover;
}
You can safely drop all the prefix, no problem for any modern browser.
Method 1
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;
}
Method 2(Using CSS)
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% */
}
}
Method 3(Also CSS)
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#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%;
}
Method 4(JQuery)
<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Refer https://css-tricks.com/perfect-full-page-background-image/
It has loads of tricks for fullscreen background.
The simplest answer, and it works everytime:
html, body {
overflow: auto;
}
My footer div is overlapping the content in chrome browser eventhough I have cleared it. Can someonone poin t me in the right direction with the css. Should I use an if is chrome javascript thing?
http://archibaldbutler.com/projects/roaming-giraffe/html/
Thanks
If the footer is designed to be at the bottom of the page all the time, then do this:
.footer-bg {
clear: both;
bottom: 0px;
position: fixed;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}
.content-bg2 {
clear: both;
float: left;
margin-top: 10px;
margin-bottom:192px;
width: 996px;
height: 369px;
background-image: url('../html/images/maincontent2bg.jpg');
background-position: center top;
background-repeat: none;
}
if it is supposed to just be at the bottom of that content area then do this:
.footer-bg {
clear: both;
bottom: 0px;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}