Jump to content
UncleStef Mentoring Update: New SEO course!

Beginner needs an image put in his webpage background

wildschuetz

By wildschuetz
in Beginners Web Design

 Share

Recommended Posts

wildschuetz Newbie

wildschuetz

Posted
Posted

Hello. I am creating a website for my business and I need help placing the attached image in my background. I have tried playing around with it a bit, but can't seem to figure it out. I am using a wordpress theme. I guess what I have attached below is what is needed? Please help! Here is what it looks like:

 

 

/*

Theme Name: SQUARED3 Wordpress

Theme URI: http://creatingyourmark.com'>http://creatingyourmark.com

Description: A clean and simple theme with a powerful CMS underbelly for anyone.

Version: 3.1.1

Author: Mark Southard

Author URI: http://creatingyourmark.com

Tags: clean, minimal, corporate, portfolio, translation ready

License: GNU General Public License v2.0

License URI: http://www.gnu.org/licenses/gpl-2.0.html

 

Copyright: © 2011 Mark Southard

 

*/

@font-face {

font-family: 'LeagueGothicRegular';

src: url('assets/fonts/League_Gothic-webfont.eot');

src: url('assets/fonts/League_Gothic-webfont.eot?#iefix') format('eot'), url('assets/fonts/League_Gothic-webfont.woff') format('woff'), url('assets/fonts/League_Gothic-webfont.ttf') format('truetype'), url('assets/fonts/League_Gothic-webfont.svg#webfontbDMP4rcs') format('svg');

font-weight: normal;

font-style: normal;

}

/*------------------------------------------

TABLE OF CONTENTS:

------------------

0.0 - Reset

1.0 - 960 Grid

2.0 - Typography

3.0 - Header & Navigation

4.0 - Footer

5.0 - Main Styles

5.1 - Portfolio Styles

6.0 - Blog Styles

6.1 - Comments

6.2 - Widgets

7.0 - Forms

6.1 - Comment Form

6.2 - Contact Form

8.0 - Media

9.0 - Shortcodes

-------------------------------------------*/

/*-------------------------------------------

0.0 - Reset

 

http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

-------------------------------------------*/

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before,

blockquote:after,

q:before,

q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/*---------------------------------------

1.0 - 960 Grid

 

Variable Grid System.

Learn more ~ http://www.spry-soft.com/grids/

Based on 960 Grid System - http://960.gs/

 

Licensed under GPL and MIT.

---------------------------------------*/

/* Containers

----------------------------------------*/

.container_12 {

margin-left: auto;

margin-right: auto;

width: 960px;

}

/* Grid >> Global

---------------------------------------*/

.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9,

.grid_10,

.grid_11,

.grid_12 {

display: inline;

float: left;

position: relative;

margin-left: 20px;

margin-right: 20px;

}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)

------------------------------------------------*/

.gallery {

margin-left: 6px;

margin-right: 6px;

}

.alpha {

margin-left: 0;

}

.omega {

margin-right: 0;

}

/* Grid >> 12 Columns

------------------------------------------------*/

.container_12 .grid_1 {

width: 40px;

}

.container_12 .grid_2 {

width: 120px;

}

.container_12 .grid_3 {

width: 200px;

}

.container_12 .header .grid_3 {

width: 220px;

}

.container_12 .grid_4 {

width: 280px;

}

.container_12 .grid_5 {

width: 360px;

}

.container_12 .grid_6 {

width: 440px;

}

.container_12 .grid_7 {

width: 520px;

}

.container_12 .grid_8 {

width: 600px;

}

.container_12 .grid_9 {

width: 680px;

}

.container_12 .header .grid_9 {

width: 700px;

}

.container_12 .grid_10 {

width: 760px;

}

.container_12 .grid_11 {

width: 840px;

}

.container_12 .grid_12 {

width: 920px;

}

.container_12 .grid_12.header {

width: 960px;

}

/* Clear Floated Elements

------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {

clear: both;

display: block;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {

clear: both;

content: ' ';

display: block;

font-size: 0;

line-height: 0;

visibility: hidden;

width: 0;

height: 0;

}

.clearfix {

display: inline-block;

}

* html .clearfix {

height: 1%;

}

.clearfix {

display: block;

}

/*--------------------------------------

2.0 - Typography Styles

---------------------------------------*/

body {

 

background:

color: #252525;

font-family: Verdana, Arial, sans-serif;

font-size: 87.5%;

font-size: 12px;

line-height: 1.5em;

}

/*--

Text Styles

--*/

p {

font-size: 1em;

/* 12px */

line-height: 1.5em;

/* 18px */

margin: 0 0 1.5em 0;

}

a {

color: #00aeef;

padding: 2px;

text-decoration: none;

}

a:hover {

text-decoration: none;

background-color: #d9d9d9;

}

h1,

h2,

h3,

h4,

h5 {

font-family: 'LeagueGothicRegular', 'Arial Narrow', sans-serif;

font-weight: normal;

text-transform: uppercase;

}

h1 {

font-size: 3em;

/* 36px */

 

line-height: 1em;

/* 36px */

margin-top: 0em;

margin-bottom: 0em;

}

h2 {

font-size: 2.5em;

/* 30px */

 

line-height: 1.2em;

/* 36px */

 

margin-top: 0em;

margin-bottom: 0em;

}

h2 a {

color: #252525;

text-decoration: none;

}

h2#tagline, h2#port_cat_tagline {

font-size: 3em;

font-weight: normal;

line-height: 1.5em;

margin-top: 0.5em;

margin-bottom: 0.5em;

}

h2#port_cat_tagline {

margin-bottom: 0;

}

h2#tagline strong, h2#port_cat_tagline strong {

background: #00aeef;

font-weight: normal;

padding: 0 5px;

}

h3 {

font-size: 2em;

/* 24px */

line-height: 1.5em;

/* 36px */

margin-top: 0em;

margin-bottom: 0em;

}

h4 {

font-size: 1.5em;

/* 18px */

line-height: 1em;

/* 18px */

margin-top: 0em;

margin-bottom: 0em;

}

h5 {

font-size: 1.2em;

line-height: 1em;

margin-top: 0em;

margin-bottom: 0;

color: #252525;

}

ol {

list-style-position: outside;

list-style-type: decimal;

list-style-type: decimal-leading-zero;

margin-left: 15px;

padding-left: 30px;

}

ol ol {

padding-left: 15px;

}

ul {

list-style-position: outside;

margin-left: 15px;

}

ul li {

background: url("assets/images/bullet.png") no-repeat 0px 6px;

padding-left: 15px;

}

blockquote {

background: #e1e1e1 url(assets/images/blockquote.png) no-repeat 10px 12px;

border: 1px solid #c9c9c9;

color: #636363;

padding: 15px 20px 15px 35px;

line-height: 1.5em;

font-style: italic;

font-weight: bold;

}

em.author {

margin-top: 1.5em;

font-style: normal;

}

pre {

font: 1em/1.4em monospace;

margin-top: 10px;

background: #f0f0f0;

overflow: auto;

overflow: hidden;

}

code {

font: 1em/1.4em monospace;

padding: 10px;

}

sub {

vertical-align: sub;

font-size: 10px;

}

sup {

vertical-align: super;

font-size: 10px;

}

var {

font-family: monospace;

font-style: italic;

}

strong {

font-weight: bold;

}

/*-------------------------------------

3.0 Header & Navigation

-------------------------------------*/

.header {

background: {

background: url(http://www.flashwirephoto.com/wp-content/uploads/2012/02/Flashwire-Circle-Background.jpg'>http://www.flashwirephoto.com/wp-content/uploads/2012/02/Flashwire-Circle-Background.jpg) no-repeat #ffffff fixed top right;

padding-right: 250px;

}

margin: 0;

padding: 30px 0 30px;

position: relative;

z-index: 10;

width: 960px;

}

.logo {

margin: -5px 0 0 20px;

}

.logo:hover {

background: none;

}

/*--

3.1 Main Navigation

--*/

.main_nav {

font-family: 'LeagueGothicRegular', 'Arial Narrow', sans-serif;

float: right;

margin-left: 0;

display: inline-block;

}

.main_nav li {

background-image: {

background: url(http://www.flashwirephoto.com/wp-content/uploads/2012/02/Flashwire-Circle-Background.jpg) no-repeat #ffffff fixed bottom right;

background-position: 0 0;

display: inline;

position: relative;

margin: 0;

padding: 0;

}

.main_nav li > a {

color: #252525;

font-size: 2.5em;

padding: 10px 15px 5px;

text-transform: uppercase;

white-space: nowrap;

}

.main_nav li.current_page_item > a, .main_nav li.current-menu-item > a, .main_nav li.current_page_parent > a {

background-color: #00aeef;

color: #fff;

font-size: 2.5em;

}

.main_nav li.current_page_item > a.myHover, .main_nav li.current-menu-item > a.myHover {

background-color: #00aeef;

}

.main_nav li > a:hover, .main_nav li > a.myHover {

background-color: #b7b7b7;

}

.main_nav li.current_page_item > a:hover, .main_nav li.current-menu-item > a:hover {

background-color: #00aeef;

}

/*--

3.2 Sub Menu

--*/

.main_nav ul.sub-menu, .main_nav ul.children {

background-color: #fff;

border: 3px solid #b7b7b7;

display: none;

margin-left: 0;

position: absolute;

left: 0;

top: 2em;

}

.main_nav li.current-menu-item ul.sub-menu, .main_nav li.current_page_item ul.children {

border-color: #00aeef;

}

.main_nav ul.sub-menu li, .main_nav ul.children li {

display: block;

padding: 0 10px;

}

.main_nav ul.sub-menu li a, .main_nav ul.children li a {

background-color: #fff;

border-top: 1px solid #b7b7b7;

font-size: 20px;

color: #252525;

display: block;

padding: 15px 20px 15px 15px;

text-transform: uppercase;

white-space: nowrap;

}

.main_nav ul.sub-menu li a:hover,

.main_nav ul.children li a:hover,

.main_nav ul.sub-menu li.current-menu-item a,

.main_nav ul.children li.current_page_item a {

background-color: #fff;

color: #00aeef;

}

.main_nav ul.sub-menu li:first-child a, .main_nav ul.children li:first-child a {

border-top: none;

}

.main_nav li:hover ul {

display: block;

}

/*-------------------------------------

4.0 - FOOTER STYLES

-------------------------------------*/

.footerContainer {

padding-bottom: 20px;

background: #252525;

color: #d7d7d7;

margin-top: 20px;

}

h1.footer,

h2.footer,

h3.footer,

h4.footer {

color: #fefefe;

font-weight: normal;

margin: 20px 0 15px 0;

border-bottom: 1px #fefefe solid;

}

.footerContainer ul {

margin-left: 0;

}

ul.footerBlog h4 {

margin-top: 0px;

}

ul.footerBlog p {

margin-bottom: 0px;

}

ul.footerBlog li {

margin-bottom: 5px;

}

.twitter_widget h2.footer {

background: url(assets/images/twitter_48.png) no-repeat 220px -4px;

}

.footer_social p {

font-size: 11px;

margin-top: 20px;

margin-bottom: 0;

}

.footer_social a:hover {

background: none;

}

.footer_social img {

margin-top: 20px;

margin-right: 5px;

float: right;

}

/*---------------------------------

5.0 - MAIN STYLES

---------------------------------*/

.content {

padding-top: 20px;

}

.two_col_content {

margin-top: 20px;

display: inline;

float: left;

}

.page p:first-child {

margin-top: 20px;

}

.divider {

height: 1px;

background: #252525;

margin-top: 20px;

}

.divider_tag {

height: 1px;

background: #252525;

margin-top: 0;

}

.img_left {

float: left;

margin: 5px 10px 10px 0;

}

.img_right {

float: right;

margin: 5px 0 10px 10px;

}

img.border {

border: 3px solid #fcfcfc;

outline: 1px solid #c9c9c9;

}

table {

border: 1px solid #d9d9d9;

margin-bottom: 10px;

}

table tr {

padding: 3px;

}

table th {

font-weight: bold;

border: 1px solid #d9d9d9;

padding: 2px 5px;

text-align: center;

}

table td {

border: 1px solid #d9d9d9;

padding: 2px 5px;

text-align: center;

}

/*--

Slideshow styles

--*/

#feature {

min-height: 320px;

padding-top: 20px;

}

.slider_pager, .slider_nav {

display: inline-block;

margin-top: 20px;

}

.slider_nav {

margin-left: 3px;

}

.slider_pager a, .slider_nav a {

background-color: #00aeef;

border: 1px solid #0089bc;

color: #fff;

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

padding: 6px;

margin: 0 3px 0 0;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.slider_nav a {

margin-right: 0;

}

.slider_pager a.activeSlide, .slider_pager a:hover, .slider_nav a:hover {

background-color: #23c3ff;

}

/* Basic Slider */

.basic_slideshow {

height: 330px;

overflow: hidden;

}

.description {

float: left;

width: 300px;

margin-right: 30px;

}

.description h2 {

font-size: 3em;

line-height: 1em;

margin-top: 0;

}

.slide_image {

background: #252525;

border-bottom: 15px solid #00aeef;

float: left;

padding: 15px 15px 15px 15px;

width: 560px;

}

/* Full Width Slider */

.full_width_slide {

height: 300px;

}

.slide_image_full a:hover {

background: none;

}

.full_width .slider_pager {

display: block;

float: right;

margin-top: 20px;

margin-right: 20px;

}

.full_width .slider_pager a {

background-color: transparent;

border: 4px solid #d9d9d9;

color: transparent;

font-size: 0px;

padding: 4px;

text-shadow: none;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;

}

.full_width .slider_pager a:hover, .full_width .slider_pager a.activeSlide {

border-color: #00aeef;

}

/*--- FLASH STYLES ---*/

#flashcontent {

left: 0px;

position: absolute;

top: 0px;

}

#flasharea {

min-height: 400px;

width: 960px;

display: inline;

float: left;

position: relative;

}

/*--

Search Page

--*/

.search-results h1 {

margin-top: 20px;

}

.ms_search_page input {

width: 220px;

}

/*--

Contact Page

--*/

.contact {

margin-top: 20px;

}

/*--

BUTTONS

--*/

a.buttonAlt {

background: url(assets/images/bullet.png) right no-repeat;

padding-right: 10px;

text-transform: uppercase;

}

a.buttonAlt:hover {

background: url(assets/images/bullet.png) right no-repeat #d7d7d7;

}

/*----------------------------------

6.0 - BLOG STYLES

----------------------------------*/

div.blog_date {

background: #00aeef;

font-family: 'LeagueGothicRegular', 'Arial Narrow', sans-serif;

font-weight: normal;

float: left;

height: 40px;

margin-top: 6px;

margin-left: -60px;

padding: 3px 4px;

text-align: center;

text-transform: uppercase;

width: 40px;

}

div.blog_date span.date {

color: #fff;

font-size: 1.5em;

margin: 0px;

padding: 0px;

line-height: 1em;

}

div.blog_date span.year {

color: #fff;

font-size: 2em;

line-height: .75em;

margin: 0px;

padding: 0px;

}

.blog_entry {

margin-left: 60px;

background: url(assets/images/blog_divider.png) repeat-x bottom;

margin-top: 20px;

padding-bottom: 20px;

}

.blog_entry h2 a:hover {

text-decoration: none;

background: #f7f7f7;

}

.single_blog_entry {

margin-left: 60px;

margin-top: 20px;

padding-bottom: 10px;

}

ul.blog_nav {

margin: 5px 0 0 -10px;

}

.blog_author {

background: #e1e1e1;

border: 1px solid #c9c9c9;

margin: 0 0 1.5em 0;

min-height: 74px;

padding: 20px 20px 20px 112px;

position: relative;

}

.blog_author .avatar {

border: 5px solid #fff;

outline: 1px solid #c9c9c9;

position: absolute;

left: 20px;

top: 20px;

}

.blog_author h5 {

margin: 0;

}

.blog_author p {

margin: .5em 0 0 0;

}

.post_thumb img {

background: #252525;

margin-bottom: 5px;

padding: 10px;

border-bottom: 10px solid #00aeef;

}

.post_thumb a:hover {

background: none;

}

.widget_col h2.sidebar_cats {

margin-top: 0;

}

/*----- COMMENTS STYLES -----*/

.comments {

border-top: 1px dotted #d9d9d9;

margin-left: 60px;

}

.comment_intro {

border-bottom: 1px dotted #d9d9d9;

}

ol.commentlist {

color: #252525;

list-style: none;

margin: 20px 0 0 0;

padding: 0;

}

.commentlist li > div {

border-bottom: 1px dotted #d9d9d9;

margin-bottom: 20px;

}

.commentlist .avatar {

border: 1px solid #d9d9d9;

padding: 3px;

float: left;

margin-right: 15px;

}

.commentlist .comment-body {

display: inline-block;

width: 550px;

}

.commentlist .depth-2 .comment-body {

width: 500px;

}

.commentlist .depth-3 .comment-body {

width: 450px;

}

.commentlist .comment-body em {

color: #00aeef;

font-style: italic;

}

.commentlist .comment-body .commentmetadata {

color: #b7b7b7;

font-style: italic;

}

.commentlist ul.children li {

background: none;

}

.nocomments {

margin-top: 10px;

font-style: italic;

}

/*----------------------------------

6.2 Widget Styles

----------------------------------*/

.grid_4.widget h2 {

margin-top: 16px;

}

.grid_4.widget p:first-child {

margin-top: 0;

}

.widget_col {

margin-top: 20px;

}

.widget_col li.categories {

background: none;

margin: 0;

padding: 0;

}

.widget_col li.categories ul {

margin-left: 15px;

}

.widget_col h2 {

margin-top: 20px;

}

/*--

Calendar

--*/

#calendar_wrap {

border: none;

margin: 0 0 0 12px;

padding-left: 0px;

}

#wp-calendar caption {

color: #00aeef;

font-weight: bold;

font-size: 1.1em;

line-height: 1.5em;

text-transform: uppercase;

}

#wp-calendar thead {

text-align: center;

}

#wp-calendar td {

padding: 5px;

text-align: center;

}

#wp-calendar tbody td a {

display: block;

}

td#prev {

text-align: left;

}

td#next {

text-align: right;

}

td#prev a, td#next a {

padding: 2px;

}

/*--

Search

--*/

.widget_search input {

width: 100%;

}

/*--

RSS

--*/

.widget_rss ul {

margin-left: 0;

}

.widget_rss li {

background: none;

padding-left: 0;

}

.widget_rss li a {

display: block;

}

.widget_rss li span.rss-date {

color: #b7b7b7;

font-style: italic;

}

.widget_rss li cite {

font-style: italic;

padding-left: 5px;

}

.widget_rss li cite::before {

content: '- ';

}

/*--

Flickr

--*/

.flickr-feed .flickr_badge_image {

display: inline-block;

margin-right: 9px;

margin-bottom: 9px;

}

.flickr-feed a:hover {

background: none;

}

.flickr-feed a:hover img {

border-color: #b7b7b7;

}

.flickr-feed img {

background-color: #f9f9f9;

border: 1px solid #d9d9d9;

padding: 5px;

}

/*--

Twitter

--*/

.twitter_widget em.twitter-timestamp {

display: block;

font-size: 11px;

font-style: italic;

color: #b7b7b7;

}

.twitter_widget .follow {

margin: 10px 0 0 30px;

}

.twitter_widget .follow a {

color: #fff;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);

background-color: #00aeef;

padding: 5px 10px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.twitter_widget .follow a:hover {

background-color: #00bfff;

}

/*----- PRODUCTS STYLES -----*/

a.product {

padding: 0;

}

a.product img {

border-bottom: 4px solid #00aeef;

margin-top: 20px;

opacity: .6;

}

a.product img:hover {

opacity: 1;

}

a.product:hover {

background: none;

}

a.product_title_link:hover {

background: none;

}

h4.product_title {

margin-top: 5px;

}

/*----- PAGINATION STYLES -----*/

p.portfolio_older {

float: right;

}

p.portfolio_newer {

float: left;

}

p.portfolio_older a, p.portfolio_newer a {

padding: 3px;

}

p.portfolio_older a:hover, p.portfolio_newer a:hover {

background: #d7d7d7;

text-decoration: none;

}

/*--

PAGINATION

-- */

.wp-prev-next {

margin-top: 20px;

margin-left: 45px;

}

.wp-prev-next .next {

float: right;

background: none;

margin: 0;

padding: 0;

}

.wp-prev-next .prev {

background: none;

float: left;

margin: 0;

padding: 0;

}

.page-template-portfoliopage-php .wp-prev-next {

margin: 20px;

margin-bottom: 0;

}

.page-template-portfoliopage-php .wp-prev-next ul {

margin-left: 0;

}

/* -- ARCHIVES PAGINATION -- */

ul.archives li.newer {

padding-left: 20px;

}

/*-------------------------------

7.0 FORMS

-------------------------------*/

input {

font-size: 1em;

font-family: Verdana, sans-serif;

background-color: #f9f9f9;

border: 1px solid #00aeef;

padding: 5px;

}

input:focus {

outline: 2px solid #00aeef;

}

textarea {

font-family: Verdana, sans-serif;

}

/*--

Comment Form

--*/

.comment_author, .comment_email, .comment_url {

width: 260px;

font-size: 1em;

background: #f9f9f9;

border: 1px solid #00aeef;

padding: 5px;

}

.comment_author:focus, .comment_email:focus, .comment_url:focus {

outline: 2px solid #00aeef;

}

.comment_comment {

background: #f9f9f9;

border: 1px solid #00aeef;

width: 98%;

font-size: 1em;

padding: 5px;

}

.comment_comment:focus {

outline: 2px solid #00aeef;

}

.comments span.alert {

color: red;

}

#reply-title small {

font-size: 13px;

padding-left: 20px;

text-transform: none;

}

/*--

Contact Form

--*/

em.contact_form {

color: #00aeef;

}

#message {

width: 580px;

font-family: sans-serif;

font-size: 1em;

background: #f9f9f9;

border: 1px solid #00aeef;

padding: 5px;

}

#message:focus {

outline: 2px solid #00aeef;

}

#name,

#email,

#company,

#author,

#url,

#phone {

width: 260px;

font-size: 1em;

background: #f9f9f9;

border: 1px solid #00aeef;

padding: 5px;

}

label.error {

color: #ff0000;

margin-left: 10px;

}

p.address, p.email, p.phone {

padding-left: 30px;

margin: 0 0 1em 0;

}

p.address {

background: url(assets/images/globe.png) no-repeat 0 4px;

}

p.email {

background: url(assets/images/mail.png) no-repeat 0 3px;

}

p.phone {

background: url(assets/images/phone.png) no-repeat 0 2px;

}

/*--

Submit Button

--*/

input[type=submit] {

background-color: #00aeef;

color: #fff;

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

font-size: 13px;

padding: 5px 10px;

border: 1px solid #0094cb;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

input[type=submit]:hover {

background-color: #00bfff;

}

input[type=submit]:active {

position: relative;

top: 1px;

}

/*-------------------------------

8.0 - Media Styles

-------------------------------*/

.wp-caption.aligncenter img,

.wp-caption.alignleft img,

.wp-caption.alignright img,

.wp-caption.alignnone img,

img.aligncenter,

img.alignright,

img.alignleft,

img.alignnone {

background-color: #f9f9f9;

border: 1px solid #b7b7b7;

padding: 5px;

margin: 15px 0;

}

img.aligncenter {

margin: 0 auto;

margin-top: 10px;

margin-bottom: 10px;

display: block;

}

img.alignleft {

float: left;

margin-right: 20px;

}

img.alignright {

float: right;

margin-left: 20px;

}

.wp-caption.aligncenter {

margin: 0 auto;

}

.wp-caption.aligncenter a:hover {

background: none;

}

.wp-caption.aligncenter a:hover img {

border-color: #252525;

}

.wp-caption.aligncenter img {

margin-bottom: 0;

}

.wp-caption.alignleft {

float: left;

margin-right: 20px;

}

.wp-caption.alignleft a:hover {

background: none;

}

.wp-caption.alignleft a:hover img {

border-color: #252525;

}

.wp-caption.alignleft img {

margin-bottom: 0;

}

.wp-caption.alignright {

float: right;

margin-left: 20px;

}

.wp-caption.alignright a:hover {

background: none;

}

.wp-caption.alignright a:hover img {

border-color: #252525;

}

.wp-caption.alignright img {

margin-bottom: 0;

}

.wp-caption.alignnone a:hover {

background: none;

}

.wp-caption.alignnone a:hover img {

border-color: #252525;

}

.wp-caption.alignnone img {

margin-bottom: 0;

}

.wp-caption-text, .gallery-caption {

text-align: center;

font-style: italic;

}

.size-full {

max-width: 100%;

height: auto;

}

.media_attachment {

margin-top: 2px;

}

.attachment_page a:hover {

background: none;

}

/*

8.1 - Gallery Styles

*/

.gallery a:hover {

background: none;

border-color: #252525;

}

.gallery img {

background-color: #f9f9f9;

border: 1px solid #b7b7b7;

padding: 5px;

}

/*----------------------------------

9.0 - Shortcodes

----------------------------------*/

a.button {

background-color: #00aeef;

background-image: -moz-linear-gradient(90deg, #00aeef, #56d1ff);

background-image: -webkit-gradient(linear, 0 bottom, 0 top, color-stop(0, #00aeef), color-stop(1, #56d1ff));

font-size: 14px;

color: #fff;

display: block;

float: right;

padding: 10px 15px;

border: 1px solid #009dd7;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

text-transform: uppercase;

text-align: center;

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

}

a.button:hover {

background-color: #0089bc;

background-image: -moz-linear-gradient(90deg, #0089bc, #00aeef);

background-image: -webkit-gradient(linear, 0 bottom, 0 top, color-stop(0, #0089bc), color-stop(1, #00aeef));

}

a.button:active {

position: relative;

top: 1px;

}

a.button1 {

background-color: #444444;

background-image: -moz-linear-gradient(90deg, #444444, #777777);

background-image: -webkit-gradient(linear, 0 bottom, 0 top, color-stop(0, #444444), color-stop(1, #777777));

font-size: 14px;

color: #fff;

display: block;

float: right;

padding: 10px 15px;

border: 1px solid #363636;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

text-transform: uppercase;

text-align: center;

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

}

a.button1:hover {

background-color: #252525;

background-image: -moz-linear-gradient(90deg, #252525, #3f3f3f);

background-image: -webkit-gradient(linear, 0 bottom, 0 top, color-stop(0, #252525), color-stop(1, #3f3f3f));

}

a.button1:active {

position: relative;

top: 1px;

}

span.dropcap {

background-color: #00aeef;

color: #fff;

float: left;

font-size: 300%;

font-family: 'LeagueGothicRegular', sans-serif;

line-height: 1em;

margin-right: 0.13em;

margin-top: 0.13em;

padding: 6px 7px 3px;

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

}

span.highlight {

background: #00aeef;

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

color: #fff;

padding: 0px 3px;

}

span.highlight1 {

background: #252525;

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

color: #fff;

padding: 0px 3px;

}

a.right {

float: right;

}

a.left {

float: left;

}

span.pullquote_right, span.pullquote_left {

background: url(assets/images/pullquote.png) repeat-y top left;

font-size: 1.2em;

font-style: italic;

line-height: 1.4em;

margin-bottom: 20px;

margin-top: 20px;

width: 33%;

}

span.pullquote_right {

float: right;

margin-left: 20px;

padding-left: 15px;

}

span.pullquote_left {

float: left;

margin-right: 20px;

padding-left: 15px;

}

div.alert_download {

background: #d6dc9d url(assets/images/download.png) no-repeat 10px 15px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border: 1px solid #828750;

color: #616632;

padding: 25px 25px 25px 60px;

}

div.alert_warning {

background: #fff799 url(assets/images/warning.png) no-repeat 10px 15px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border: 1px solid #ee9d00;

color: #754d00;

padding: 25px 25px 25px 60px;

}

div.alert_information {

background: #bae3ff url(assets/images/information.png) no-repeat 10px 15px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border: 1px solid #3bacf9;

color: #045f9d;

padding: 25px 25px 25px 60px;

}

/*

Lists

*/

ul.star_list_black li {

background: transparent url(assets/images/list_star_black.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_blue li {

background: transparent url(assets/images/list_star_blue.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_pink li {

background: transparent url(assets/images/list_star_pink.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_yellow li {

background: transparent url(assets/images/list_star_yellow.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_orange li {

background: transparent url(assets/images/list_star_orange.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_green li {

background: transparent url(assets/images/list_star_green.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_dark_blue li {

background: transparent url(assets/images/list_star_dark_blue.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_brown li {

background: transparent url(assets/images/list_star_brown.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_red li {

background: transparent url(assets/images/list_star_red.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.star_list_purple li {

background: transparent url(assets/images/list_star_purple.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_black li {

background: transparent url(assets/images/list_check_black.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_blue li {

background: transparent url(assets/images/list_check_blue.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_pink li {

background: transparent url(assets/images/list_check_pink.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_yellow li {

background: transparent url(assets/images/list_check_yellow.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_orange li {

background: transparent url(assets/images/list_check_orange.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_green li {

background: transparent url(assets/images/list_check_green.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_dark_blue li {

background: transparent url(assets/images/list_check_dark_blue.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_brown li {

background: transparent url(assets/images/list_check_brown.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_red li {

background: transparent url(assets/images/list_check_red.png) no-repeat 0px 3px;

padding-left: 20px;

}

ul.check_list_purple li {

background: transparent url(assets/images/list_check_purple.png) no-repeat 0px 3px;

padding-left: 20px;

}

/*

Frames

*/

img.frame {

border-bottom: 5px solid #00aeef;

padding: 5px;

}

img.frame1 {

background: #252525;

padding: 5px;

border-bottom: 5px solid #00aeef;

}

img.frame2 {

background: #eeeeee;

border: 1px solid #ffffff;

border-radius: 3px;

-moz-border-radius: 3px;

-webkite-border-radius: 3px;

box-shadow: 0 1px 5px #d1d3d4;

-moz-box-shadow: 0 1px 5px #d1d3d4;

-webkit-box-shadow: 0 1px 5px #d1d3d4;

padding: 5px;

}

img.left {

float: left;

margin: 10px 10px 10px 0;

}

img.center {

display: block;

margin: 10px auto;

}

img.right {

float: right;

margin: 10px 0 10px 10px;

}

Link to comment
Share on other sites
Andrea Newbie

Andrea

Posted
Posted

There is nothing attached - but usually, depending on what you want, background images get added via the body element in your CSS:

 

body {

 

background:

color: #252525;

background-image:url('path/toImage.jpg');

font-family: Verdana, Arial, sans-serif;

font-size: 87.5%;

font-size: 12px;

line-height: 1.5em;

}

 

There are certain options available - the image by default repeats itself horizontally and vertically, but you can adjust that as needed, and you can affect the exact position of the background image. We can help better if we have more specifics.

Link to comment
Share on other sites
Andrea Newbie

Andrea

Posted
Posted

First, it's best to upload the image to your own server and not link to someone else's.

 

body {

 

background:

color: #252525;

background-image:url('path/toImage.jpg');

background-repeat: no-repeat;

font-family: Verdana, Arial, sans-serif;

font-size: 87.5%;

font-size: 12px;

line-height: 1.5em;

}

 

Just make sure that you have the correct path to wherever you'll be putting the image. Direct is best for this, so for example: url('www.yoursite.com/images/background.jpg')

Link to comment
Share on other sites
wildschuetz Newbie

wildschuetz

Posted
  • Author
Posted

I don't think I am applying the data in the correct location. This is what I plugged in and it isn't working:

 

3.1 Main Navigation

--*/

.main_nav {

font-family: 'LeagueGothicRegular', 'Arial Narrow', sans-serif;

float: right;

margin-left: 0;

display: inline-block;

}

.main_nav li {

background-color: #ffffff;

background-image: url(http://www.flashwirephoto.com/wp-content/uploads/2012/02/Flashwire-Circle-Background1.jpg);

background repeat: no-repeat;

background-position: 0 0;

display: inline;

position: relative;

margin: 0;

padding: 0;

}

 

 

 

Sorry I'm being difficult. I am not skilled in this (obviously). Thanks for your patience.

Link to comment
Share on other sites
wildschuetz Newbie

wildschuetz

Posted
  • Author
Posted

The problem I have is he has several parts to his theme:

 

TABLE OF CONTENTS:

------------------

0.0 - Reset

1.0 - 960 Grid

2.0 - Typography

3.0 - Header & Navigation

4.0 - Footer

5.0 - Main Styles

5.1 - Portfolio Styles

6.0 - Blog Styles

6.1 - Comments

6.2 - Widgets

7.0 - Forms

6.1 - Comment Form

6.2 - Contact Form

8.0 - Media

9.0 - Shortcodes

 

I assumed it would go in the "Header & Navigation" portion, but that didn't work. Every one of these section has a body and background portion of code.

Link to comment
Share on other sites
grabenair Newbie

grabenair

Posted
Posted

You can add a body element to your css at the bottom if you can not find it in the file. Or if you are using a child theme put it there.

body {

background: url(images/bg.jpg) no-repeat center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

This is if you put your img in the img folder on your server and you want it to cover the hole page. An example of this you can see on a site that I am currently working on http://www.robertbonnerswebdesigns.com/fourseasonsfloralwholesales.com

I put the url here just to see if that is what you are looking for.

Also If you are not using a child them I would strongly suggest it as if you do any updates with out it they will be gone. Trust me that bites.

Link to comment
Share on other sites
Andrea Newbie

Andrea

Posted
Posted

I assumed it would go in the "Header & Navigation" portion, but that didn't work. Every one of these section has a body and background portion of code.

That just depends on what it is you want - can you be a bit more specific? What kind of image do you want where?

Link to comment
Share on other sites
grabenair Newbie

grabenair

Posted
Posted (edited)

I had to come back and look at your css again. Your body tag that you are looking for is the first one under

/*---

2.0 - Typography Styles

--*/

scroll down until you find the above and you will see your body tag and the background tag is empty all there is is

body {

 

background:

color: #252525;

font-family: Verdana, Arial, sans-serif;

font-size: 87.5%;

font-size: 12px;

line-height: 1.5em;

}

Put the code I posted earlier here. Make sure that you upload your img to the images folder on your server and this should fix your problem.

All that cover stuff is to make your img cover the hole browser window with out stretching the img and making it look funny.

Edited by grabenair
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...