How can I fix my backkground using CSS?

by jt47000

Posted: 11 years ago 13 replies

WEB DESIGN

Hi,

I'm having a small , easy to fix, issue with my background for my site. My site is JBeachHouse | Just another WordPress site and I used a beach picture for the background and it's tiled and looks bad because it overlaps. The theme won't let me change the background from tiled to centered. or stretch to fit.

How could I go about fixing the background through editing my style sheet?

Any help is appreciated, thanks!

JT

#backkground #css #fix

Designs1

11 years ago

Try to find 1920x1080 image and write this to CSS file

That is how you make the image stay still when scrolling down.

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

[ 1 ] Thanks
2 replies

Signature

[WSO DESIGN] Stunning :: Professional :: Beautiful - WSO SALES PAGES | ECOVERS | BANNERS | HEADERS - Must See!

{{ DiscussionBoard.errors[7606474].message }}

jt47000

11 years ago

Try to find 1920x1080 image and write this to CSS file

That is how you make the image stay still when scrolling down.

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

Designs1, Thank you again for helping me! I actually contemplated skyping you with this one before i posted this but didn't want to be a bother. I added the custom css, changed the image size and I'm still having a small issue with it. This time it looks like its vertically repeating itself, check out both the main page and the "tour" link up top.

JBeachHouse | Just another WordPress site

Thanks again buddy for all your help

Thanks
1 reply

{{ DiscussionBoard.errors[7606565].message }}

Designs1

11 years ago

Originally Posted by jt47000

No problem, follow David's and Istvan's advice and you should be fine.
And you can always contact me on Skype for help!

[ 1 ] Thanks

Signature

[WSO DESIGN] Stunning :: Professional :: Beautiful - WSO SALES PAGES | ECOVERS | BANNERS | HEADERS - Must See!

{{ DiscussionBoard.errors[7607217].message }}

David V

11 years ago

Originally Posted by Designs1

Try to find 1920x1080 image and write this to CSS file

That is how you make the image stay still when scrolling down.

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

Designs1 is correct, and your using the cloriato theme, so your stylesheet should look like this with the recommended css added. That will solve your repeat problem.

HTML Code:

Version: 1.4
License: GNU General Public License
License URI: license.txt
Tags: green, black, blue, white, two-columns, fixed-width, threaded-comments, sticky-post, translation-ready, microformats, editor-style, custom-menu, dark, custom-header, custom-background
*/
@import url("css/reset.css");
@import url("css/960_24_col.css");
/*--------------------------------------------------------------*/
/* Default Style*/
/*--------------------------------------------------------------*/
body {
	font:13px/1.5 'Trebuchet MS', Arial, 'Liberation Sans', FreeSans, sans-serif;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
}

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[7606724].message }}

jt47000

11 years ago

Designs1 is correct, and your using the cloriato theme, so your stylesheet should look like this with the recommended css added. That will solve your repeat problem.
HTML Code:
Version: 1.4 License: GNU General Public License License URI: license.txt Tags: green, black, blue, white, two-columns, fixed-width, threaded-comments, sticky-post, translation-ready, microformats, editor-style, custom-menu, dark, custom-header, custom-background */ @import url("css/reset.css"); @import url("css/960_24_col.css"); /*--------------------------------------------------------------*/ /* Default Style*/ /*--------------------------------------------------------------*/ body { font:13px/1.5 'Trebuchet MS', Arial, 'Liberation Sans', FreeSans, sans-serif; background-repeat:no-repeat; background-attachment:fixed; background-position:center; }

I think at this point my picture is too short, and my content is too long, thats why its repeating vertically. Do i just need a longer picture?

Thanks for the input friend

JT

Thanks
1 reply

{{ DiscussionBoard.errors[7606791].message }}

David V

11 years ago

Originally Posted by jt47000

I think at this point my picture is too short, and my content is too long, thats why its repeating vertically. Do i just need a longer picture?

Thanks for the input friend

JT

That's not why it's repeating. Content length is irrelevant.
By default when you upload a background image in your specific theme it will repeat.
Doing what Design1 said does work when placed where shown.
Your theme by default adds the bg image in the body class.
It's not ideal, but what is suggested does work, I physically did this in your theme (cloriato) and it works.
What Istvan suggested is a better solution then the default method the theme uses.

Open/Edit your css and do this:

HTML Code:

/*--------------------------------------------------------------*/
/* Default Style*/
/*--------------------------------------------------------------*/
body {
	font:13px/1.5 'Trebuchet MS', Arial, 'Liberation Sans', FreeSans, sans-serif;
	background-image:url(images/bodybg.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
}

Change the image name in the code above (or rename your image)
This is a long hand way of writing it, but it's easier to understand.

You will need to take your background image and upload it to your theme folder inside the images folder.
You cannot use the admin area to upload the image, it needs to go inside the theme folder/images.
If that's an issue, then change the url in the code to absolute (the image url: http://thesite.com/thepath).

[ 1 ] Thanks

{{ DiscussionBoard.errors[7606937].message }}

Istvan Horvath 11 years ago

Well, it won't work... because there are TWO [2] style declarations for the body:
- in the stylesheet
- inline

And as we know, CSS stands for "cascading" stylesheets, so they are applied cascading from
1. separate stylesheet
2. style in the <head>
3. inline style
the higher number over-rides the previous declarations.

Remove the bg image that you set in the themes options.

Add the bg img declaration to the stylesheet TOGETHER with what has already been suggested.

background-image:url('absolute-path-to-the-uploaded-image');
- [ 1 ] Thanks
Signature
{{ DiscussionBoard.errors[7606847].message }}
Istvan Horvath 11 years ago
Code:

background-image:url(images/bodybg.jpg);
Don't forget: to make this work, you need to have on your server a folder named /images/ right under the the folder of your theme AND to have the bg image uploaded to that folder!
- [ 1 ] Thanks
Signature
{{ DiscussionBoard.errors[7606966].message }}

jt47000

11 years ago

Thanks guys for all your input! I hope i'm not that idiot that just doesn't and will never get it but I'm still having issues.

I've pasted the css exact, I've used an absolute path and have been messing with variations over the past few hours and still no change.

A few more quick questions, then if I don't figure it out, I don't figure it out. I do appreciate all your help, Thank you Designs1, David, Istvan and Jacob.

1. I inspected the element with firebug and I thought this was interesting...

<!DOCTYPE html>

<html lang="en-US">
<head>

<body class="home blog logged-in admin-bar customize-support" background="http://www.beachbikereview.com/jbeachhouse-temp-location/wp-content/uploads/2013/01/j-beach-house-rocky-point-mexico-background2.jpg " background-position:center;="" background-attachment:fixed;="" background-repeat:no-repeat;="">
<div class="top_cornor"></div>

<div class="body-content">

</body>

</html>

This is default, so it already has all the coding that I need in there, why's it still repeating?

2. I found three places where I could potentially put the code that you have all given me:

Style.css
Editor-Style.css
Header.php

In the header.php i found this line of code which I think has something to do with preventing the code you've all given me from working.

<div class="logo"> <a href="<?php echo home_url(); ?>"><img src="<?php if ( get_option('inkthemes_logo') !='' ) {?><?php echo get_option('inkthemes_logo'); ?><?php } else {?><?php echo get_template_directory_uri() ; ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?>" /></a></div>

Out of the 3 files, which ones or one should I add the code to?

3. Also Istvan, I removed the background from the theme via the theme and it goes back to the default line pattern background. Nothing happened while adding the code and used the absolute path and it didnt seem to work still. What do you think?

I hope you guys don't consider me a lost cause. This thing is killing me and I'm determined to figure it out. Thanks again guys. I really do appreciate it.

JT

Thanks
1 reply

{{ DiscussionBoard.errors[7613856].message }}

David V 11 years ago

Nobody thinks your an idiot.
Sometimes is tough to know a persons level of knowledge, so a few assumptions get made, no problem.

"This is default, so it already has all the coding that I need in there, why's it still repeating?"
That's not default, you added it into the wrong file somewhere.

The css goes into the style.css file

However you added it to the actual body class, stop it, remove it. Undo whatever you've done.
Stay out of the header.php

If you look at my previous code block that was posted, what your seeing is the style.css

It sounds like your doing this in admin, so go to theme editor.
Select the style.css to edit.
You'll see right there at the top the "body" as indicated in earlier comments.
Enter it as shown.
Don't enter it anywhere else. (header.php, into the body class, etc..)

You should be good after that. ( and don't forget to upload that image to the theme image folder! Using full urls in a stylesheet is just a bad practice.

Backup first. You can just backup the style.css if you want by going into the editor. Select all the code (or ctrl+a) then copy it and paste into a plain text document (notepad, notepad++, sublime, whatever, but not word) then save it to your desktop as style.css

If you still have trouble, let me know....
- [ 1 ] Thanks
- 1 reply
{{ DiscussionBoard.errors[7613901].message }}
- jt47000 11 years ago
  
  David! It worked, I totally got it! Thank you so much... this was the problem
  
  I was posting
  
  body {font:17px/1.5 'Liberation Sans', FreeSans, sans-serif;}
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
  
  when i shouldve been posting:
  
  body {font:17px/1.5 'Liberation Sans', FreeSans, sans-serif;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;}
  
  Just one little bracket out of place. Thanks again David and thanks to all of you for helping.
  
  JT
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[7613967].message }}
  
  David V 11 years ago
  
  Super, glad you got it!
  
  Thanks
  
  {{ DiscussionBoard.errors[7613985].message }}

How can I fix my backkground using CSS?

Trending Topics

Some interesting stats about brand comms

Fixing a massive traffic drop after rebranding

Meta AI now has Google Search results

Looking at the average screen time and socmed usage

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?