I’ve been playing around with html, css and JS lately. Right now I have a div that has a background gif. This is what I did:
<div class = "mydiv" style = "background-image: url(play.gif);"></div>
So first, it fills the entire space by repeating the image over and over side by side. I was wondering if there was a way to only have the image show up once and at the center of the div.
Another question I have is if it is possible to “pause” the gif at the beginning and only play it when the user hovers over the div and when they hover-off the gif goes back and stays at the beginning. If this is not possible for gifs, is it possible for videos (.mp4 .webm etc.)
To the first part of your question, yes you can have it show up once in the center. Here is an example.
.mydiv{width:100%;
height:100vh;
background-image:url(http://bestanimations.com/Animals/Birds/Penguins/animated-penguin-gif-5.gif);
background-repeat:no-repeat;
background-position: center center;}
<div class="mydiv">
</div>
You could use something like this:
.mydiv {
background-image: url(static.gif);
background-repeat: no-repeat;
background-position: center;
}
.mydiv:hover {
background-image: url(play.gif);
}
where static.gif would be just the first frame from your gif.
Related
How can I make it so that a 100 by 100 image repeats itself all throughout the webpage. I want the image to duplicate itself and fill the screen.
for example lets say I had this picture:
and I wanted it to look like this:
The spacing doesn't matter, but how would I do this?
You would use a repeating background image in CSS. Then you can control the size of the image with background-size.
body {
background: url('https://i.stack.imgur.com/LtCRM.png') center center repeat;
background-size: 2em;
}
CodePen: http://codepen.io/oculusriff/pen/VmZdzg
Edit: As per nicovank's comment - if you are new to CSS, here is the separated version of the above code.
body {
background-image: url('https://i.stack.imgur.com/LtCRM.png');
background-position: center center;
background-repeat: repeat;
background-size: 4em;
}
This is the closest I got to what I wanted. Sorry for not wording the question right.
https://codepen.io/anon/pen/ZBzRaX
I don't know what is making it repeat, but I think it's this. Now I just have to figure out how to make the button fit the whole screen. The button is only a sliver at the top right now.
document.body.style.background = "url('"+links[i]+"')";
I'm really new into html/css/javascript and I need some help with a site I'm trying to design.
My URL is this one: http://www.wideconcept.com/test2/test.html
It's a full-page background site, with the background image being responsive. The problem is when the user clicks on the "photos" link, and then on '1': the image that gets displayed on the screen as the new background is not positioned as the original background image, and also the height of page increases (the user can now scroll down).
How can I change the html/css code so that, when the user clicks on the 1st image, to display it in the same way as the background image?
Thanks!
EDIT - To be more specific: My main problem is that when I click the 1st photo link, the image is not displayed in the same position and dimensions as the original background image, even though the css properties for that are the same as the original background css properties.
I just realized your design was having some scroll position for the background image( which seems fine in firefox but not in chrome )
To fix the problem:
img { //line no. 375
display: block;
height: 1px;/*this fixes your bug*/
}
Another problem I found is that your div with id background, so add the following rule inside #background:
#background {
z-index: 1; /* to fix the layer bug*/
}
I think that you can define the main background in that way:
body{
overflow: hidden;
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(assets/bg100.jpg) no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
#Add the browser prefixed CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
#And
background-size: cover;
}
And then when the user clicks the photos buttons change the background image url through jQuery/javascript.
For example, using jQuery this should be similar to this:
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
Hope it helps.
Just like Halbano said, the problem are the <div id="background"> and the <div id="background-image">
You can fix it by doeing the following:
<div id="background background-image"></div>
Do this at the Background div.
Al of the sudden the image will drop a bit but that is simply fixed with css. Also a Menu with a button will pop-up. Apperantly the manu was there already but i could not see it in Chrome.
Good luck
I have an image, see below:
http://bookyoursite.com/images/bysheaderpic.png
The Image is a page banner with the title of the page starting around the middle of the picture.
What I have currently is
#banner {
background-image:url('/images/bysheaderpic.png');
background-repeat:no-repeat;
background-position:right bottom;
height:191px;
max-width:1080px;
min-width:550px;
width:80%;
}
What happens is that when the window is resized, the image is shaved off of the right, and cuts off the first part of the title. If I use
background-position:center bottom;
it cuts off of both sides equally, resulting in the .com being cut off.
What I need is the image to shrink (when the window is resized) such that the title of the page remains visible. To do this, the background needs to be "attached" around the 2/3 mark to the middle of the container
I've played with the background-attachment and background-position attributes to no avail. Is there a way to do this without using javascript?
You can try to use:
background-size: cover;
Read more about background-size property at MDN.
Also you can do this by making your image 100% width and height and insert it inside your container.
HTML:
<div id="banner">
<img src="http://bookyoursite.com/images/bysheaderpic.png" width="100%" height="100%">
</div>
CSS:
#banner {
height:191px;
max-width:1080px;
min-width:550px;
width:80%;
}
Have you consider a css maskand some width and max-width with percentage
something like:
-webkit-mask-image: url(image.jpg);
Is it possible to keep an image from moving while the user scrolls through a web page. like the user always sees the image? I'd imagine it'd be possible using a but I don't know how.
Use the css position: fixed; attribute, specifying top and left absolute attributes.
body {
background-image: url("http://yoursite.com/path/to/image.gif");
background-position: 50% 50%;
background-repeat: no-repeat;
}
My question is going to be pretty concise. I saw this Deezer page and I tried to zoom in and out to see that the image is "out of zoom" (see the image below)
Below is a structure we consider to be my page:
<body>
<div class="visual-header">
<div class="container">
SOME TEXT
</div>
</div>
PAGE CONTENT
</body>
How am I supposed to use image.png of a size of 2000x800 pixels to get this effect?
This will make the background image fit the width of the screen, whatever the zoom level.
BODY
{
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
background-size: 100%;
}
If you want the image to stretch both horizontally and vertically (and not retain its aspect ratio), use:
BODY
{
margin: 0;
min-height: 100vh;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
background-size: 100% 100%;
}