We Keep Coding

Keep divs positioned relative to image

I am trying to create a "map" with divs over cities. I got the map in .svg format and using it as background with background-size: cover. I need the "city-divs" to stay positioned relative to the image (for example London div should be always over London position on my image). I can half-achieve this making the "city divs" absolute and then positioning it using vh and vw. However, if I resize the window or check on different computer, it messes up.
I guess pure css is not the correct way on doing this. Is there a way of achieving this or am I going completely wrong direction?
Closest I got was using this solution found on stackoverflow http://jsfiddle.net/fmenrd4z/ . This works for divs in the center of image just about right. Divs more to the left / right won't work as good.
Currently, I'm using this code.
HTML
<section id="map">
<div id="london">london</div>
<div id="paris">paris</div>
</section>
CSS
#map {
background-image: url(../img/maps/map.svg);
width: 100vw;
height: 90vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#london {
position: absolute;
left: 31vw;
top: 35vh;
}
#paris {
position: absolute;
left: 60vw;
top: 73vh;
}
I suppose there must be solution for this problem. I've been searching the web for whole day today but didn't found anything.
I'm up for choosing completely different way of doing this. (Is there some javascript library etc..?)
Thanks in advance!

This will never work because you position the divs dimensions that are always changing depending on the screen it is displayed.
There is one of way of doing it by giving a fixed height and width of section #map in pixels for large screens and adding some media queries for mobile screens.
#map {
width: 600px;
height: 300px;
}
#media (max-width: 1024px){
#map {
width: 300px;
height: 150px;
}
}

React js css class background image not visible

I have added a class in react component.
CSS file:
.bg{
background: url('../img/bg.jpg');
border: 2px solid black;
}
React render method:
render() {
return (
<div>
<div className="bg">
Hey This
</div>
</div>
);
}
The browser shows the border and loads the image but image is not visible.
The screenshot is as follows:
Can anyone tell me what I am doing wrong?

This is most likely happening because div.bg does not have a height specified. Because of this, its height fits the text content exactly.
Background images of any size have no affect on the sizing of their parent element. If your goal is to be able to see the entire image, you need to specify a height for div.bg that matches the height of the original image.

Your .bg div is currently of size 0x0 px, this is why the image is not showing. Specify a width and a height to see the image.
For example:
.bg {
height: 300px;
width: 300px;
}
Or more preferably use 100% to have the entire image fit in the div.
.bg {
height: 100%;
width: 100%;
}
As a side note: make sure your background image is not too large and takes much time to load. Large background image size can lead to very bad user experience. Consider using a png image, small image with the repeat attribute, or an svg.

Try changing the background to background-image. Also give the bg class a height and a width. Then finally specify background-size to probably cover. An example would look like
.bg {
background-image: url('../img/bg.jpg');
background-size: cover;
border: 2px solid black;
height: 300px;
width: 300px;
}
This should work as I have tried it.

background-size: contain;
Not sure what the image is, but this would size the image to fit the current div height defined by the text.

Place the img folder in public folder
.css
background: url('/img/bg.jpg');
or
.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>

Have you tried switching from
background: url('/img/bg.jpg');
to
background-image: url('/img/bg.jpg');

It's very important to set height, but not in %
Example provided by Yuval is correct and worked fine.
.bg {
height: 300px;
width: 300px;
}

Div with image over another div

I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/

add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.

try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem

I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}

The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??

The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/

I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

Blur background - Jquery / Pure CSS / Image?

I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?

There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.

I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.

I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.

you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.