Apply background image in header and switch to logo image for mobile

[marijen]

Hello good morning!

I was wondering if it’s possible to place a background image to the Arcadian template. Our main reason for purchasing this template is its functionality on mobile devices and I would not like to compromise that by placing an image that causes conflicts. The only thing is that now on PC the logo size that suits the iPhone perfectly looks too small and out of place. I would therefore like to use a large background image, be able to disable that to work on mobile devices and keep the space for the logo. Is all of that possible? If the disabling part is too customized, please let me know

http://www.ishairdesign.es

Tx!

Marije

Topic

[Jason Bobich]

Hello Marije,

No, I wouldn’t say this out of the realm of possibility. These would be just be CSS customizations you’d need to make to the theme. Take a look at /assets/css/responsive.css for how the theme targets tablets and mobile devices with the viewport @media queries. That’s the basic approach you’d take. For example —

.header_logo {
	background: …;
	height: …;
}
.header_logo .tb-image-logo {
	display: none;
}
@media (max-width: 480px) {
	.header_logo {
		background-image: none;
		height: auto;
	}
	.header_logo .tb-image-logo {
		display: inline;
	}
}

In this example, you’re essentially applying a background image and height to the DIV around the logo and hiding the logo image within. Then when the viewport gets down to 480px viewport size, you’re removing that height and background image on the wrapping div along with displaying the logo image again.

====

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[marijen]

Hello Jason,

Thank you for your feedback. Before I tackle the viewport topic: where and how exactly would I configure in what css the fact that I want to use a background image to the entire site?

[marijen]

ok, I managed to input a background image but it’s repeating: ishairdesign.es
I tried using these codes:

body {
background: #f7f7f7 url(../images/body-bg.png) background-repeat:none;
}

and body {
background: #f7f7f7 url(../images/body-bg.png) background-image: no-repeat;;
}

both in either dark.css and theme.css without any luck.

Could you please help me?

[Jason Bobich]

Start with this bit I posted above:

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

If you’re making these kinds of customizations, you’ll want to get a Child theme installed. There’s no reason to ever edit any files of the Parent theme, especially with something as simple as CSS changes. You can customize just about everything from a Child theme.

So, start with watching this video: http://vimeo.com/41331677 — It’ll show you how to setup a Child theme and where to put your Custom CSS.

On a side note, theme.css and dark.css are not files that do anything in the theme. They’re simply the un-minified versions of the files that do get used.

[marijen]

Hello Jason,

I followed your steps, overwrote the changes I made to both css files and created a child theme as explained in the video.

I addes this to the custom css:

/* Add your custom CSS here. */
{
background-image: #f7f7f7 url(../images/fondo.jpg) background-image: no-repeat;
}
However it is not adding a back ground image to my site. Could you help me please?

[marijen]

Hello Jason,

Sorry but my entire theme is no longer configured and switching to another browser and switching back onto the Arcadian them the child theme is no longer there as an option. I don’t want to configure the entire thing again if that is the result of using a child theme. How can I get my configuration back’ at the back end it all seems well configured…at the front end it does not.
Please assist.

Thank you!

[Jason Bobich]

You’re just talking about the theme options?

See here: http://dev.themeblvd.com/tutorial/saving-theme-options-and-switching-themes/

Add this to your Child theme’s functions.php —

function my_option_id( $option_id ) {
    return 'arcadian';
}
add_filter( 'themeblvd_option_id', 'my_option_id' );

Only other thing, is just confirm your widgets are still in the right place and assign whatever menus you created under Appearance > Menus, should all take a few minutes.

[marijen]

ok, I will try this tx! and after that, what are the codes and steps to include a background image site wide with no-repeat?

[Jason Bobich]

Please remember that free support does not include providing customizations. We do have great customization partners, though, at WerkPress.

Here is information on the background property in CSS:

http://www.w3schools.com/cssref/css3_pr_background.asp

http://www.w3schools.com/cssref/pr_background-repeat.asp

[marijen]

Hello Jason,

I got the child theme thing up and running! So tx for that.

I understand you are not supporting customization but I followd your links copied the code below in the custom.css but nothing. I tried different types of codes but after 10 attempts I really don’t know what to do 🙁

/* Add your custom CSS here. */
body
{
background: #00ff00 url(‘/images/fondo.jpg’) no-repeat fixed center;
}

Marije

[Jason Bobich]

I can see a background image in your header. So I guess you figured it out in the last 7 minutes since posting? It looks to me the main issue you’re having is with understanding how image paths work in CSS. Remember that the path to the image is always relative from the CSS file.

Here’s a good quick article on this: http://css-tricks.com/quick-reminder-about-file-paths/

[marijen]

Hello Jason,

Sorry, no. That was me replacing the header bg with the image, but I still have not managed to put a background image behind the entire site.

[Jason Bobich]

All right, so you’re using body as your selector for your styles. What tells you that this is going to work? It doesn’t work, so what steps are you taking to troubleshoot that? What happens if you take an inspector like Firebug (as I pointed out back at the start) and inspect the <body> tag? What do you see in the theme that would be more specific and overriding what you’re using as a CSS selector? — This is the basic process of making your CSS customizations.

Click to enlarge

[marijen]

🙁 I really don’t get it. I replaced body-bg.png in the dark>images folder but it places the image behind the content block. I use firebug as you suggested, but I am going in circles. I am really trying to understand what you mean….
I just want the image to display behind the entire site not just parts. I am thinking it should be place wihtin the ‘body’ context or maybe it’s the wrapper?

[Jason Bobich]

body.content_dark {
	background: url(../images/fondo.jpg) center top no-repeat;
}

[Author]

Replies