background image resize on all screen resolutions

Started by MyTime, October 14, 2014, 01:41:06 AM

Previous topic - Next topic

MyTime

I have added a background image too my site finally, and resized it too I would guess 1350 x 700 pixels and it fills out perfectly on my computer. But on my friends computer and the background image is a lot smaller as if I used a different range of pixels. I was curious if anyone has a solution too making a full sized background image compatible on all computer resolutions or monitor sizes. It was also cut short on my iphone, I later changed it too 1440 x 900 as I heard that was a better choice, but the bottom of my image when I scroll down is cut-off short. I had changed it previously too 2000 x 1000 and it seems too fill out on my friends computer screen but was way too over sized on mine.
It is no repeat and fixed image background as I edited that into the code. I like it too scroll down too the bottom and hit the bottom of the background. My background is also originally an .EPS file so I can resize it too whatever works.

I was thinking maybe it's possible to fix my website too a certain height/width so that the site may be smaller on bigger monitors but still keep the same aspects for the background image too show properly. I'v literally been working like 10 hours today and some of last night on this lololol, i'm a noob.
Site link is Forum.CannabisGamerClub.com

kat

Just off the top of my head... Can you not use "auto", or a percentage, rather than using a fixed width?

width: auto|value|initial|inherit;

auto   Default value. The browser calculates the width.
length   Defines the width in px, cm, &c.
%   Defines the width in percent of the containing block.
initial   Sets this property to its default value..
inherit   Inherits this property from its parent element..

css has never been my strong point, though. So, I could've just typed a right load of old bollox. :(

margarett

There was a recent discussion about that same question and, IIRC, a solution was given.

If only I could find it... :(
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

MyTime

So what do you guys suggest I do, Honestly this has been a real big struggle for me, and i'm kind of brain dead from it.

Antechinus


MyTime

I looked it up in the community search and didn't find any promising results and went through a couple is that what you meant me too do?


I found a link too this but trying too read it is like almost a different language to me.

margarett

Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

MyTime

Okay, I checked it out. but it still looks like a different language too me lol...
Should I just post on the post on how too do this. I'm kind of a noob and need like step by step instructions.

Gwenwyfar

It is a background right? If the background looks fine stretching on both sizes, you can use this:

background-size: 100% 100%;

If you want to keep proportions but still stretch, you can use this:

background-size: 100%;

Quote from: margarettThere was a recent discussion about that same question and, IIRC, a solution was given.

If only I could find it...
Wasn't it this one?
"It is impossible to communicate with one that does not wish to communicate"

MyTime

this is what I have in my .css file for my theme
}

#body-bg {
   background: #444 url(../images/custom/body-bg.png) auto;
}#background {
    background: url("../images/green/background.jpg") no-repeat fixed 100%
}

It's coming out too large on mine what should I do
when I make the image 1350px x 650px it comes out perfect in adobe illustrator.
I made it 1440 x 900 and it's a little proportionate on my screen. I was told it would be a good idea too mae it 2000 x 1000 but it's way too zoomed in on the background on my screen.

ARG01

#10
As I have told you previously, the image will appear different on various screen resolutions regardless. Either a larger image or a repeating image will take care of your very long standing issue.

That said, again, please cease in posting any form of code from a premium theme in the public boards.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Antechinus

The css is available from any browser anyway, even straight from the Dziner demo site. It's far from secret. There's little point in worrying about that. The only thing you can't get straight from any browser is the PHP (but obviously you can still get the HTML).

Try this:

#background {
    background: url("../images/green/background.jpg") no-repeat fixed;
    background-size: 100%;
}

Streamlife

Hello there Try mine

First Open In your theme css Folder
inside ur Index.css
then search for   background: url
This below Code its Mine Try it mayb work For you

body {
    background: url("../images/theme/body_bg.png") no-repeat fixed 100% 100%;
    font: 78%/130% "Verdana","Arial","Helvetica",sans-serif;
    background-size: cover;

Work With all Monitors Resolutions ;)
you can check it here
http://vskgaming.com.ar/foro/
Lucky with ur project

Best regargs

Advertisement: