So I'm programing a site and the body bg image is set to background-image:cover. It works fine but there is one issue. My background image is 1138px × 825px and I want it to stay at those dimensions if the browser window is smaller than 1138px × 825px. I want the image to act like a regular background image and not shrink. When the browser is open larger than 1138px × 825px I want the css cover feature to kick in. I have tried applying min-height/min-width and height/width but to no prevail. Any ideas or solutions? Thanks a lot in advance. Site and CSS code are below.
Site: test.baysidemarket.com
CSS code:
#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 1000px;
height: 725px;
}
html:
<body id="home">
</body>
The only way to do that in css is with the
#media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}
I didn't test this, but this should logically work:
'use strict';
$(document).ready(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
console.log(body_w + 'x' + body_h);
// Initial check
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
$(window).resize(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
else {
$('body').css({
'-webkit-background-size' : 'auto',
'-moz-background-size' : 'auto',
'-o-background-size' : 'auto'
'background-size' : 'auto'
});
}
});
});
It does an initial check if it should use cover and check again when the window get's resized.
Don't forget to remove the initial CSS background-size, as it's not needed anymore.
#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
width: 1000px;
height: 725px;
}
Note: If possible, try to upgrade your jQuery. I see you use 1.7.2, try using 1.9.x
Related
I am struggling with a problem, where I want to set the background image for one component differently. This is how it is written in the index.css:
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
font-family: "EB Garamond", serif !important;
background-image: url("views/graphics/CatanBG.png");
overflow-x: hidden;
}
/* set background image per page */
.game-bg {
background: url('views/graphics/sea.gif');
background-size: 30px;
;
}
This produces the following picture:
As you can see, the actual background image is still ("views/graphics/CatanBG.png") and when zooming out it looks like this:
I use game-bg in the div for the component where I want to have it as background image like that:
render() {
console.log("state", this.state);
return (
<div className={"game-bg"}>
more code
</div>
}
Anyone with an idea on what the problem is?
Thanks in advance!
so I know you're using CSS instead but if you wanted to consider using styled-components (which is great by the way) then it's super simple.
You can use this:
const GlobalStyle = createGlobalStyle`
html {
background: ${props => (props.something ? url(imageone) : url(imagetwo))};
}
`
that way you can pass a prop in and then render something different based off that. I do this to render a different background image for my app
the docs are here: https://styled-components.com/docs/api
let me know if you need any more details
Details : Using Atom File Editor with Mac OS X, Making a new site on localhost and after saving it I check changes on chrome browser. Right now i have come across a problem which causes the image to not show up on the website while i was trying to set background image of a section tag in CSS.
Problem : I am trying to use the stellar.js parallax plugin and for that i need to set the background property of the section tag to an image of my choice. The problem is that when i use "background : url(parallax1.png);" the image does not show up on the website and only a white blank space is shown.
HTML File :
<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->
CSS File :
.pic1
{
background : url(parallax1.png);
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
Points You Should Know :
the image parallax1.png is in the same directory and i have checked the spelling, which is correct.
I have also tried using background-image: instead of background: .
If i use < img src="parallax.png" /> the image shows up perfectly
i have tried to encase parallax.png in '' as well as "".
Any help would be appreciated,
Thanks.
Generally, you should have some content within the section tag or you can set in .pic1 class
min-height:200px;
Try background : url("parallax1.png");
Read more here
CSS background Property
take a look
html
<section class="parallax1 pic1">
</section>
css
.pic1
{
background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
width: 100px;
height: 32px;
border:1px solid #000;
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
working Fiddle
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});
I would like to add some pure CSS parallax scrolling functionality to my website, but everything I've tried doesn't seem to work. I've searched here for answers too, but nothing answers my question. Does anybody know how I can take this code: http://wolfleader116.github.io/
(Sorry, the Doctype declaration isn't indented like that in the actual file.)
and add a pure CSS parallax scrolling feature so that the background scrolls at half speed? Thanks!
You Can Try this tutorial.
Tutorial Link 1
Tutorial Link 2
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
You can use the background-attachment: fixed css style to create a CSS only parallax scroll. This uses the concept of the background-image being fixed and the remaining content scrolling with the page.
.parallax div{
background-attachment: fixed;
height: 50vh;
text-indent : -9999px;
position : relative;
background-position : center center;
background-size : cover;
&:nth-child( 2n ) {
box-shadow : inset 0 0 1em #111;
}
}
DEMO
This is how I did my website (WIP) with parralax scrolling (http://www.ideathhead.co.uk):
HTML:
Add section tags using the attributes below. (Each section represents a slide)
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
CSS:
This will make sure your background image spans across the whole page, and adjusts it's size for every resolution!
#home {
background: url(img/slide1.png) 50% 0 repeat fixed;
min-height: 100%;
background-size: cover;
margin: 0 auto;
}
And that is literally it, for the basics of parallax scrolling anyway, if you dig further on the interwebs you could do some playing around for some cooler effects, remember, GOOGLE IS YOUR FRIEND!
_________________________________________________________________
BELOW IS OPTIONAL IF YOUR WILLING TO USE A BIT OF JS!!
_________________________________________________________________
Also, a tip is that if you want to add buttons later on the scroll smoothly to certain pages then add this to a JavaScript file:
JS:
This script makes page scrolling smoother, so it doesn't just jump to a part of a page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Then, in your HTML, in tags, set the href to the ID of the section to scroll to, and it will do so smoothly too! As an example,
This is the section:
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
And this is the button:
CLICK
Remember, it is the ID not the name, because I got confused at first with that!
I was happy to help :)
I keep seeing websites with a background image that subtly moves when you scroll down. This is a really nice effect but I'm not sure how to do this? I'm am experienced with html, css and jquery but this is something I haven't done before!
I have a simple jsfiddle below but I need some help please!
Many thanks,
http://jsfiddle.net/def2y2yt/
Code snippet - more available using the jsfiddle link
.background {
background-image: url(example.pjg);
background-repeat: no-repeat;
height: 600px;
width: 100%;
}
Like TylerH said, it's called Parallax. You can see an example here.
Using JavaScript:
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
Or you could use this simple CSS property which I made a blog post about:
http://nathanpeixoto.fr/blog/article8/web-un-one-page-presque-sans-javascript
(French only, sorry).
Let's say this is your HTML:
<div class="background_container">
</div>
<style>
.background_container{
background-image: url("XXX");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /* <= This one */
}
</style>
The best library for that is Stellarjs
Take a look at the example here
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html