What I need is what the following site does exactly but it's not a slideshow it's just a fading background image :
http://www.stevenharrisarchitects.com/
The image is 100% in width and 100% in height so no Cropping occurs, and this is what I want exactly.I had managed to do this part very easily with the following codes :
#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}
I made the background-size : 100% 100% ;
It works fine, but the only problem that's left is that my client doesn't want the image to resize with the size of the window, instead it should act like on the site I mentioned above (Try resizing the window and you will see what I mean).
I don't want my background image to re-size to the 100% of width and height of my window, I want it to act just like in the above link I shared.
Also a link to my site :
http://leydenlewis.com/
Any help would be much appreciated.
If you need to use the background property and never want the image to be cropped, you should use background-size :contain;
div.big_background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('http://placekitten.com/g/1200/800') no-repeat center top;
background-size :contain;
}
Answer based on problem described above:
#bg-stat {
width: 100%;
height: 100%;
background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
Answer based on feedback:
CSS:
#bg-stat {
width: 100%;
height: 100%;
}
#bg-image {
background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
width: 100%
min-width: 1140px; // Based on img dimensions or arbitrary
max-height: 735px; // Based on img dimensions or arbitrary
}
i think you need below code:
body
{
background: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
}
Related
I wanna keep the section filled with a background image after the position transform.
Using this code I get a white background from the body element.
<section><div class="firstpage"></div></section>
.firstpage{
position: absolute;
background-image:url('https://i.ibb.co/HGSY9Rv/bcb.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
width:100%;
}
$(".firstpage").mouseenter(function(){
$(".firstpage").animate({
'background-position-x': '-200px',
});});
$(".firstpage").mouseleave(function(){
$(".firstpage").animate({
'background-position-x': '0px',
});});
https://codepen.io/gamegame/pen/NWMpJvy
make the bg image bigger in the width by using a calculation
the calculation is created by using native CSS calc()/var()
basically, we add the length of the animation to the width
so it will always overflow,
and this is correct since we have a calc() (so it is responsive)
so the animation works fine always bigger and smaller display
100% + 200px
(let's say if the width of your device is 550px, now this calcolation will be 550 + 200 = 750)
and there isn't any need for javascript for animation
because with :hover we can do the same / and transition
code example:
body {
margin: 0;
overflow:hidden; /* for not see the scrollbar */
}
.firstpage {
--x: 200px;
position: absolute;
background-image: url("https://i.ibb.co/HGSY9Rv/bcb.png");
/* not use `attachment: fixed` here */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: calc(100% + var(--x));
transition: background-position-x 0.5s ease-in-out;
}
.firstpage:hover {
background-position-x: calc(var(--x) * -1); /* 200px * -1 = -200px */
}
<section>
<div class="firstpage"></div>
</section>
I think the header covers it all. Can a small let's say 40x40 part of the 1600x1200 background image of an HTML (javascript, jquery) page be used as another div. I mean I take a 40x40 part of the image and set it as a div with id "div1" and so on for another parts. The idea is, that the divs are set to the background image, so that if watched from a smaller screen with the "fit in" function there will be no misplacement. I hope you get the idea.
Best Regards.
jsFiddle
CSS
html {
background: url(http://placehold.it/350x150) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0px -30px;
width: 50px;
height: 30px;
}
Note
This uses the sprite technique and should work fine for this scenario.
References:
http://www.guistuff.com/css/css_imagetech1.html
Demo pulled from Reference
CSS
.icons {
display: block;
width: 40px;
height: 40px;
background-image: url(http://www.guistuff.com/css/images/sixicons.png);
background-repeat: no-repeat;
}
.icon_1 {
background-position: 0px 0px;
}
.icon_2 {
background-position: -40px 0px;
}
.icon_3 {
background-position: -80px 0px;
}
.icon_4 {
background-position: 0px -40px;
}
.icon_5 {
background-position: -40px -40px;
}
.icon_6 {
background-position: -80px -40px;
}
HTML
<span class="icons icon_1" style="float:left;"></span>
- Icon No.1<br/>
<span class="icons icon_2" style="float:left;"></span>
- Icon No.2<br/>
<span class="icons icon_3" style="float:left;"></span>
- Icon No.3<br/>
<span class="icons icon_4" style="float:left;"></span>
- Icon No.4<br/>
<span class="icons icon_5" style="float:left;"></span>
- Icon No.5<br/>
<span class="icons icon_6" style="float:left;"></span>
- Icon No.6<br/>
It sounds like you want to use an image as a CSS Image Sprite. You can set a background image on a DIV and then adjust the background-position as needed.
JSFiddle Example
.big-image {
background-image:url(http://img2.netcarshow.com/McLaren-F1_1993_1024x768_wallpaper_01.jpg);
background-repeat:no-repeat;
display:block;
}
.img-sec-1 {
background-position: -175px -268px;
height:40px !IMPORTANT;
width:40px !IMPORTANT;
}
.img-sec-2 {
background-position: -270px -290px;
height:50px !IMPORTANT;
width:50px !IMPORTANT;
}
My page has some animations that sometimes change the page height (on purpose), so initialy when the page is loaded and page height is 100%, the background image covers the page.
But when it runs the animations, the page height can go beyond 100%. The only way to effectively cover all the background is to change background height from auto to a bigger value (e.g. 200%), but doing so i am also changing the page height. In other words, is it possible to cover (dynamically) the page when the animations are running while keeping page height at 100% when animations are not running?
my css code for the background:
background: url(background2.jpg)repeat 5% 5%;
position: absolute;
background-size:cover;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 400;
height: auto;
width: auto;
$(document).ready(function(){
var isAnimating = $("#someid").is(':animated');
//will return true if selected element animating
if(isAnimating == true){
$('#div').css('height','value');
}
else{
$('#div').css('height','value');
}
});
background: url('') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=60);/* For IE8 and earlier */
width: 100%;
height: 100%;
overflow: hidden;
hi friends apply this css
How does one accomplish a hero-unit similar to this: http://tribalmedia.co.uk/
I'm curious more than anything as to how this was created. As far I can tell it's more than likely some JS that's applying a min-height percentage value to the class depending on browser height.
EDIT: Try resizing your browser height and you'll see the min-height property is being changed.
Any input would be greatly appreciated!
Just read the CSS:
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
min-height: 618px;
position: relative;
}
Demo: http://jsfiddle.net/qwertynl/5a343/
it's just the css stuff.Following is the CSS used by the particular website.
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
min-height: 618px;
position: relative;
}
I was able to solve my question using this Javascript!
function resizeHero() {
var windowHeight = $(window).height(),
heroUnit = $(".hero-unit");
heroUnit.css({
minHeight: windowHeight
});
}
$(document).ready(function() {
resizeHero();
$(window).on("resize", resizeHero);
});
I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?
Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use this CSS:
background-size: cover;
Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/
Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}