Add Image to main body background

NeilT
Inactive member
Topic Author
Member

9 years 5 months ago #42411 by NeilT

Add Image to main body background was created by NeilT

Is it possible to add an image as the main body body background?

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 5 months ago #42413 by ivan.milic

Replied by ivan.milic on topic Add Image to main body background

Image actually exists but brings only an graphic detail.

templates/hot_betting/images/shadow_big.png

you can just change that image

Please Log in to join the conversation.

NeilT
Inactive member
Topic Author
Member

9 years 5 months ago #42437 by NeilT

Replied by NeilT on topic Add Image to main body background

Thank you Ivan

That has almost worked

Please can you look at my test site -> web111.extendcp.co.uk/timperleyvillafc.co.uk/

I am trying to get the Football shirt as the back ground, but you will see the black band?

How am I best to do this?

Thank you

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 5 months ago #42446 by ivan.milic

Replied by ivan.milic on topic Add Image to main body background

remove background property from this in layout.css:

.upper_wrap {
background: url(../images/shadow_big.png) center 320px no-repeat;
}

#wrapper_shadow {
background: url(../images/shadow_big.png) bottom no-repeat;
padding-bottom: 25px;
}

and add this:

body {
color: #666666;
background: url(../images/shadow_big.png) bottom no-repeat;
background-attachment: fixed;
background-size:cover;
}

Please Log in to join the conversation.

NeilT
Inactive member
Topic Author
Member

9 years 5 months ago #42449 by NeilT

Replied by NeilT on topic Add Image to main body background

Thanks Ivan,

I have done that, but now no background shows.

Here is the layout.css that I am using with your changes

----

Code:

/*------------------------------------------------------------------------
# "Hot Betting" Joomla template - October, 2011
# Copyright (C) 2010 ArhiNet d.o.o. All Rights Reserved.
# License: http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
# Author: HotJoomlaTemplates.com
# Website: http://www.hotjoomlatemplates.com
-------------------------------------------------------------------------*/

html {
	font-size:12px;
}

body {
	margin:0;
	padding:0;
	font-family: 'Droid Sans', sans-serif;
}

.topline_wrap {
	height:26px;
}

.topline {
	margin:0 auto;
	padding:7px 0 0 0;
}

.topline div.moduletable {
	float:right;
}

.topline img {
	margin:0 2px;
}



#wrapper {
	margin:0 auto;
	position:relative;
	height:auto;
}

#logo {
	padding:20px 0 0 0;
	width:290px;
	float:left;
}
	
#topmenu {
	height:101px;
	margin:0 auto;
}

#topmenu_pad {
	padding:23px 0 0 0;
	float:left;
}

#topmenu_container {
	float:right;
	background:url(../images/topmenu_bg.png);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	padding:6px;
	height:44px;
}

#topmenu_container2 {
	padding:0 20px;
	background:url(../images/topmenu_bg_white_bar.png) repeat-x;
	height:43px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

#search_module {
	float:right;
}

#path_wrap {
	min-height:4px;
	padding-left:10px;
}

.path {
	margin:0 auto;
}

.path_pad {
	padding:0;
}

.main_area {
	margin:0 auto;
}

.content_wrap {
	margin:0px 6px;
	float:left;
}

.content_wrap_noleft {
	margin:0px 6px 0px 0;
	float:left;
}

.content_wrap_noright {
	margin:0px 0 0px 6px;
	float:left;
}

.content_wrap_noleft_noright {
	margin:0px;
	float:left;
}

.content_pad {
	padding:15px;
	background:#fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin-bottom:6px;
}

.article_pad {
	padding:0 0 20px 0;	
	line-height:16px;
}

.column_left {
	float:left;
}

.column_left_pad {
	padding-right:0;
}

.column_right {
	float:right;
}

.column_right_pad {
	padding-left:0;
}

body {
color: #666666;
background: url(../images/shadow_big.png) bottom no-repeat;
background-attachment: fixed;
background-size:cover;
}

.upper {
	margin:0 auto;
}

.bottom {
	padding:0 0 10px 0;
	margin:0 auto 15px auto;
}

.module_padding {
	padding:0;
	margin:0 20px 0 0;
	float:left;
}

.last {
	margin:0;
}

.footer_wrap {
	padding:15px 0;
}

.footer_content, .footer_wrap_copyright_content {
	margin:0 auto;
}

.footer {
	width:50%;
	float:left;
}

.footer_pad {
	padding:20px 0;
	line-height:24px;
}

.footer_pad img {
	padding:0 7px 0 0;
}

.footer_pad_right {
	padding:20px 0;
	text-align:right;
	line-height:24px;
}

.footer_wrap_copyright {
	padding:0;
    margin:0;
}

.hot_tabs {
	background:#f36f00 url(../images/tabs_bg.jpg) no-repeat;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:0 10px 20px 10px;
}

.clr {
	clear:both;
}

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 5 months ago #42454 by ivan.milic

Replied by ivan.milic on topic Add Image to main body background

Just modify this:

body {
color: #666666;
background: url(../images/shadow_big.png) bottom no-repeat!important;
background-attachment: fixed;
background-size:cover;
}

(add !important flag)

Please Log in to join the conversation.

Time to create page: 0.301 seconds