Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Factory OC

Certain size background image in CSS.

You need an image the same size of the screen or an image that flawlessly repeats or stretch the wall paper.

Recommended Posts

Posted · Original PosterOP

Of course this is my body

body {
	background-color: white;
	background-image: url(Interior.jpg);
	background-repeat: no-repeat;
}

And this is how it looks 

Spoiler

f30a3213-3ecb-4af0-a6dc-741e83b46c09.jpg.bb61e508002a9b091013d6bc6ac264b1.jpg

Of course I sized it over, but it looked stretched. How do I fix that? I want it to be like a bar on the upper part of the page.


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites
Posted · Best Answer

You need an image the same size of the screen or an image that flawlessly repeats or stretch the wall paper.


                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
Posted · Original PosterOP
2 hours ago, vorticalbox said:

You need an image the same size of the screen or an image that flawlessly repeats or stretch the wall paper.

Thank you. How would I go to make this fit flawlessly on other displays wider than mine?


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites
10 minutes ago, Factory OC said:

Thank you. How would I go to make this fit flawlessly on other displays wider than mine?

have multiple versions that load depending on screen size.


                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
Posted · Original PosterOP
Just now, vorticalbox said:

have multiple versions that load depending on screen size.

What properties will I need to apply to load different versions?


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites
7 minutes ago, Factory OC said:

What properties will I need to apply to load different versions?

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

Link to post
Share on other sites
2 minutes ago, M.Yurizaki said:

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

Personally I hate "wallpaper" style background images.


                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
Posted · Original PosterOP
13 minutes ago, vorticalbox said:

Personally I hate "wallpaper" style background images.

Yeah. I'm just training my HTML and CSS, so I'm trying to make a fake website for a fake indoor modeler for training.


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites
Posted · Original PosterOP
19 minutes ago, M.Yurizaki said:

You need to do a media-query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

Looking up "responsive design" should also give you a plethora of material.

Thank you so much. Can't wait to implement this.


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites

There are some other ways to get around this. If you have an image with a bigger resolution than your screen you can use 

background-size: cover;

This causes the image to be scaled so it fills the whole container. It will remain with the same aspect ratio, so there will be some overlapping. But you can fix this by setting the background-position to center or something. If you are using a full page sized background image you should think about adding 

background-attachment: fixed;

This causes your background image to stay in the same position while the content is scrolling over it. When you want to have a repeating background you should use seamlessly repeating graphics. These guys offer a big collection of simple repeatable background textures. The advantage of this, since it's only loading a small graphic, that it doesn't really affect your page load time.

 


"I speak English very well, bröcklersweiß und nier zu schnell"

-- Probably the favorite quote from bavarian students

Codepen http://codepen.io/MoVo99/

Software Skills

  • HTML, CSS & Client Side JavaScript
  • PHP (Laravel & Lumen)
  • JavaScript (NodeJs with Express)
  • Java (Android SDK; Bukkit SDK)
  • Ruby On Rails (Just learning.... 20%)
Link to post
Share on other sites
Posted · Original PosterOP
3 minutes ago, MoVo said:

There are some other ways to get around this. If you have an image with a bigger resolution than your screen you can use 


background-size: cover;

This causes the image to be scaled so it fills the whole container. It will remain with the same aspect ratio, so there will be some overlapping. But you can fix this by setting the background-position to center or something. If you are using a full page sized background image you should think about adding 


background-attachment: fixed;

This causes your background image to stay in the same position while the content is scrolling over it. When you want to have a repeating background you should use seamlessly repeating graphics. These guys offer a big collection of simple repeatable background textures. The advantage of this, since it's only loading a small graphic, that it doesn't really affect your page load time.

 

Okay, thanks. I love some of the patterns I see.


I NEEDED WINDOWS 10 64-BIT SO BADLYxD



 

The awesome build

Ram: DDR400 2.5 GB   GPU: It's big, that's all I know   Case: A red box   Motherboard: My mother hates me   HDD: I don't have one, I threw it against the wall and it broke, so it is a softdrive   CPU: Intel Pentium 3, Quake get's rekt   OS: Microshaft Winblows XP

 

Here comes a beast of a laptop, the TravelMate 5742, it's so bad (get the reference )

Ram : 4 GB DDR3 SDRAM  (1066Mhz)     CPU :  Intel Core i5 480M / 2.66 GHz (It turbo's up to 2.93 GHz)     GPU :  Intel HD Graphics     HDD : 500GB (5400 rpm) OS : Windows 10 Pro 64-Bit (Build 1607)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×