Streaming live at 10am (PST)

SVG as a background and elements on top


#1

Hi guys!
I’m new here so please be gentle :slight_smile:
I’m trying to put the SVG dot as background/image and i want to add divs(elements on top) .
I managed to do that on the home page but got feedback from the designer that the background needs to cover the entire screen.
at the contact page I’m trying to do that but either the image is overflowing and not fitting in the screen or it is fitting in the screen but with a lot of margins.
someone maybe has a suggestion for me?
Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/varda-website?preview=d8761d34bb263ffa89409c16d3390634


#2

Hello!

I think the reason this is happening is because the SVG that the designer made wasn’t edge to edge when they exported it. So setting the background to to 100% width will only produce this result:

If they can put a row of dots on the very edge to make it edge to edge it will fix this issue.

Thanks!
Ryan


#3

Also, I don’t think it’s a good idea to try and match the whole image which is repeating x, y elements.

Easier would be to create one dot image (svg) with spacing as much as you wish and then set it as Background - repeating x,y. No?

As an example with this image

bg-repeat

Result:


#4

This works also. But either way, you will have to create a new image because having the current SVG does this:


#5

@PHRyan @Throatscratch Thank you very much!
I contacted the designer to get the two options .
I’ll try your solutions , Thanks !


#6

@PHRyan @Throatscratch Hi guys!
finally got the edge to edge and the dot svg from the designer . I’m trying to fit a tile on top of the dots and when the screen size changes it moves! it is killing me! what am i doing wrong ?

i want to see frame of tiles in the contact page and it moves all the time when the screen gets big/small . also in the home page i want tiles to be for example 2 rows from the top and on column from the left and it is also getting arround .
please help !
Thank !

https://preview.webflow.com/preview/varda-website?preview=d8761d34bb263ffa89409c16d3390634


#7

Try setting the background image of the body to width: 100%. It isn’t perfect but it will the dots on the left and right edges. I feel like the svg is rectangle and not a perfect square because it doesn’t fill to the top.

Here is the style setting I’m talking about:


#8

@Omer_Ba Hi, I believe i know what you want to achieve.

Just to be clear, some quick questions.
Do you have and are able to share a picture or anything on the web that you are trying to achieve? ( this would help to guide you in the right direction )

Now some extra things. You seem to be putting image elements, instead of Div’s and set image as their background property. Me and @PHRyan have posted images with background options seen.

The reason you see image behaving like that is because it is image element and they are not calculated. So changing it to BGimage hopefully would solve it. If you’re still stuck, hopefully ill manage to make a quick project and share so you can see the way we set up. That is if i think it is what you are trying to achieve.

Here is share link : https://preview.webflow.com/preview/magic-land-of-design?preview=1eb54eaf554f2dad777e5073677ef6d6
( check background image page )

Live - version : http://magic-land-of-design.webflow.io/background-image

Hopefully this helps


#9

here is the reference of what i’m trying to achieve .
the white block are always at the same spot no matter the size of the screen . in my project i want them to be little bit more to the center of the screen but still at relative position to the dot background .


#10

@Omer_Ba Check my links again, i have quickly updated them. You can inspect the project and ( using chrome tools inspect your inspiration site, and reverse-engineer ). Obviously i made them for desktop ( not mobile breakpoints ) - in short everything is absolute positioned, text is a bit trickier. But with images this should work.