SVG with a background

I( have a SVG
http://stevenh.fatcow.com/test/index.html

why is its background responsive, but not the grid?

I used

and made it responsive

http://stevenh.fatcow.com/test/index.html
Why is the background image not scaling

Hi there lurtnowski,

does this help?

lurtnowski.html (9.9 KB)

coothead

yes, thanks.
So I see one of the things I needed was viewBox=“0 0 1000 628.3” on the SVG
and style it like

#floor-plan {
    display: block;
    width:80vw;
    margin: auto;
	 background-image: url( images/Watch-Floor.jpg );
	 background-size: contain;
    background-repeat: no-repeat;
	 background-position: 1.6vw 1.6vw;
 }

what does

	 background-position: 1.6vw 1.6vw;

do?

I find the MDN documentation good for questions like this.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

… If two values are used, the first value represents the horizontal position and the second represents the vertical position. …

Hi there lurtnowski,

I used it instead of the code…

	 background-position: 20px 20px;

…which you used in your original code. :winky:

Removing all of your links, I would have coded it like this…

lurtnowski-wo-bootstrap-etc.html (7.5 KB)

coothead

1 Like

thanks, I have 1 question, when I look at
http://stevenh.fatcow.com/test/index.html
why isnt the whole background image in the SVG (A little seems to be cut off the right & bottom)

Hi there lurtnowski,

oooooops, I am sorry about that. :unhappy:

I forgot about allowing for background-position settings. :wonky:

Change this…

#svg-holder {
    width:90vw;
    height: 58.4vw;
    margin: auto;
    background-image: url( http://stevenh.fatcow.com/test/images/Watch-Floor.jpg );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 1.4vw 1.85vw;
 }

…to this…

#svg-holder {
    width: 91.4vw;
    height: 58.4vw;
    margin: auto;
    background-image: url( http://stevenh.fatcow.com/test/images/Watch-Floor.jpg );
    background-size: 90vw 56.55vw;
    background-repeat: no-repeat;
    background-position: 1.4vw 1.85vw;
 }

coothead

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.