How to fix texts and background so they don't over...

MariaVenturini · ‎05-20-2017

Ciao Guys!

I'm having trouble finding a solution to this:

When I screen my website on a big screen, like a IMac, my home page text overlap the drawing that I put as background.

www.mariachiaraventurini.com is the name of the website if you wanna see what I mean

I tried to put this HTML but it doesn't work!!

Thank you for the help!

body {
  width: 100%;
  height: 100%;
  background: #020202;
  background-attachment: Fixed;
  color: #3e3e3e;

KreatMarjan · ‎05-21-2017

Ciao Maria, come va

I would go with a different approach. Instead of background which changes with monitor size I would make a section bellow content and put the background photo as a section background photo.

The look should remain the same. If the section isn't high or long enough (height) - put in some spacer elements...

It should solve this case I think

Bye

Marjan

P.S. Se serve una mano sono disposto.

MJCS · ‎05-22-2017

Hi @MariaVenturini,

How confident are you with CSS? I've used the ::after rule to add content to the end of a section with great success. Basically it will never overlap because it's always 'after' the section content. Have a look at the end of the Sellers, Ts & Cs, FAQs, and Contact Us sections of this website: http://www.brightonsundaymarket.org/ to see my example.

The graphics at the bottom are always after the section content - no matter the width - from mobile to 4k.

If you use a browser's inpect tool you'll be able to narrow down the section label and then add your image to the 'content' rule of an after modification. For example, I searched and found that the FAQ section of my site was labelled 5, so I've added this to my Settings>SEO>Header Code:

.wsite-background-5::after {  /* FAQs */
    content: url(http://www.brightonsundaymarket.org/files/theme/bssfront.svg);
    position: relative;
    bottom: -4px;
}

You'll need to add your background image file to the ASSETS of your site in Theme>Edit HTML/CSS and then reference the image with your sites URL. You'll also need to inspect your site and experiment with different CSS to get it where you're happy.

This method will avoid the need for spacers which are not responsive. A bit tricky to implement - but flawless in the outcome.

Best of luck, Mark

How to fix texts and background so they don't overlap in bigger screen?