Does anyone offer coding a website service?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I have a background image on my site that does not fit the dimensions of the screen. I've tried numerous dimensions but certain parts of the image gets cut off and with it being an image and viewing it on different screen resolutions the size always changes.

With designing a website and coding it, I know that the standard page size is 1024x768px but with Yola it suggests between 1500-1700 wide and no height suggestion. This intern makes it hard to get the accurate size.

What I would like to do is code my site and move it to another server OR get the background image 100% correct and for the size not to change.

If there is anyone who does coding and can advise on a solution I'd really appreciate it.

Thanks.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Lei Ling,

Are you using an account type and page style type that allows you to edit the css code? Which page style are you using?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Crystal,

Yes, I'm on the Silver Package and am using the Clean Slate Style.

I've edited most of the site using the CSS overrides. The size of the image that I currently have is 1390x600px.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Lei Ling,

Have you tried specifying the background size in CSS:

background-size: auto;

or background-size: 100% 100%;

or background-size: contain;

Here is a site with additional info: http://www.css3.info/preview/backgrou...
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi Crystal,

Thank you! It worked.

However, I have a 5 page website and on every page the background image is different. Do you how I can incorporate that into the code?

I read the link you sent and it's a great help but it only speaks about multiple images on 1 background and not different site pages.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I forgot to mention that the current background image on the CSS code now runs across all 5 pages which I don't want.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Lei Ling,

The limitations of the template make it more difficult but one idea that should work for making a different background on each page is adding a css html widget on each page. Style elements (CSS) listed on each individual page will take precedence over the same style element listed in an external css file. Are you specifying the background in the element? If so, to make a different background on each individual page, on the page insert a HTML widget, and enter the following code:

<style type="text/css">
body {
background-image: resources/IMAGE1.jpg;
}
</style>


If it doesn't work, try adding !important after it, this makes it so it can't be overridden by a conflicting element declaration:


<style type="text/css">
body {
background-image: resources/IMAGE1.jpg !important;
}
</style>
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Thanks Crystal.

When I removed the background image tag in the css overrides, the background images remained on each individual page:).

Thank you again!!