web_Clickable area on dynamic image - css

I was wondering what the easiest and simplest method was to make (3) different clickable areas on a jpg image used as website. But, I'm using the following code to make it dynamically resize on window dimension change
(css)
background: url('backgroundIMG.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and so I need a solution that would move the clickable areas move/reposition accordingly, because otherwise I found an easy way to make clickable areas using Edge Animate, but I fear this only works for static backgrounds.
Thanks!

I'd make 3 divs with height and width as needed, but that have no content. Then I'd make each div do whatever I needed.
It's important to add that the height and width will be in '%' and not in 'px'. That makes them move according to the background image.

Related

Background-size: cover not working in any browser

I have the following HTML code:
<header id="header">
<h1><span id="titlu-pagina">Watercolors</span></h1>
<ul>
<li>About Me</li>
<li>Where To Find Me</li>
<li>The Blog</li>
</ul>
</header>
and the respective CSS one:
#header {
height: 800px;
text-align: center;
border-bottom: 1px solid black;
background-color: #734C8F;
background-image: url('10.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
}
I am trying to set up an image as a background for the header but for some reason the image is not displayed in its full size. I've tried low res images and still, some parts are cut from it. If I resize the browser the image scales and in the end it gets to its full size.
If I change the code to
background-image: url('10.jpg') no-repeat center center fixed;
the image doesn't display at all. What am I doing wrong? I've tried the code in all browser but the result is the same.
Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)
If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%.
Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.
background-size: 100% 100% means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.
cover however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.
Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.
That analogy make things clearer …?
To make your background-image resize without cropping it must be proportionate to the parent, or header. If your header has a 16:9 ratio then so must your image. They need to resize together. But this seems more tricky than it needs to be.
The alternative would be to use the following structure;
<header>
<img />
<nav></nav>
</header>
The image sits inside the header. The nav (which sits on top of the image) is absolutely positioned relative to the header.
This may need some further media-queries to manage font-sizes and nav list items for smaller screens.
JS Fiddle
#header {
text-align: center;
border-bottom: 1px solid black;
background-color: #734C8F;
background-image: url('10.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
width:100%
min-height: 100vh;
}
I have add 2 lines of code to your header section by this you can able to solve your problem
Bro instead of using background-image: url ('x') no-repeat center center fixed; in you above alternate i suggest you this is the format.. background:url ('x') no-repeat center center fixed; because the background short hand property in css is what i suggest in my message.. thk you bye frnds

html div over background image

I have a template for a website, it's an image which i have set as a background image. Now what i need to do is place html over it. For example there an part of the whole template where some images are but eventually when they are clicked they need to do something. So i need to place some divs over the whole template containing the different parts.
I don't know what the right approach for this is. What i've done right now is set the background image like this:
#body{
width:1280px;
height:8000px;
background: url(something.jpg);
background-repeat: no-repeat;
background-position:center;
}
So it always centers the image if you were to resize the window it would stay centered. This works fine.
Now i need to add another div in the body (of course) which needs to stay on top of the image.
I've tried and searched on the internet alot but the div seems to have a position that can't move. so how i resize the window it keeps in the same place.
I hope it's a little clear what i'm trying to do, and keep in mind this is my first time doing something like this so any help is greatly appreciated.
Thanks in advance!
PS: i'm not trying to cover the whole page in the background, just the original size which is 1280 all the time, and if the window gets resized bigger than 1280 in width it needs to center the image.
(if you're trying to set an image as the body's background to cover the whole screen)
Instead of settings width's and height's on your body, you should just set the size of the background to cover
css-tricks.com/perfect-full-page-background-image
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can do this so the image is always centered
.main{
width:600px;
margin:50px auto;
}
<div class="main">
<img src="path to img"/>
</div>

Understanding a CSS Background property attribute

I came across this piece of CSS which a certain website has used for implementing full screen background image :-
html {
background: url(../images/bgrnd.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#ffffff;
}
I looked at all the attributes and went through all the background properties on w3schools.com and understood everything but one. The center paramenter is repeated twice and I don't understand why, nor to which attribute it belongs to. Is it for background-position property ??? But then, only one center would do I guess....umm....so ? what am I missing ?
X and Y coordinates. First "center" is related to "X" and second to "Y". And, yes, it is about background-position
One center for horizontal align and the other for vertical align (in that order)

Fluid images on fluid background image

i need your help! My client wants a wordpress page with full screen backgrounds.
On one of the pages, i need to place 3 images on the fullscreen background image that stay in the exact position and are fluid themselves.
3 persons on the image should be selectable and there will be a lightbox with information about them.
this is how it should look:
this is how the background is positioned:
.bg{
background: url(images/gang.jpg);
background-repeat:no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:-700;
}
so i need three more pngs as hover images, that stay on the three persons.
there would be no problem if it shouldnt be fluid.
is there a way to do it with css? i'm a bit of a javascript noob, but if there would be a way, please let me know.
i thought 3 pngs in the exact same size as the background and with CSS-Mask would be a solution, but even FF doesnt support that so thats no option.
Any ideas?
thanks guys and excuse my english!
Rather than using using background-size:cover or background-size:contain with a full-width bg image:
Split the content area up into 3 columns (1 for each person).
Use a responsive design or fluid layout for the width of each column (or if necessary, use JS or jQuery to detect the width and height of the browser and calculate the width needed for each column).
Add a hyperlink in each column with display:block; width:100%;.
Add a pair of img tags to the hyperlink with width:100%; height:auto; (default image and hover image).
Add mouseover/mouseout event handlers to each hyperlink (using JS or jQuery) that toggle which img tag is hidden.
The advantage of using columns is that the hyperlink hotspots will always match the size and location of each image (which otherwise might be difficult to do for all screen sizes and orientations).

Spanning an image acrosss the browser like in facebook banner but now an image

I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
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;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.

Resources