Jump to content

Archived

This topic is now archived and is closed to further replies.

romanondrasek

pls help me with

Recommended Posts

romanondrasek    0
romanondrasek

Hi, I have an idea how to change the site, but not sure how to create :-( 

 

I saw here some tips how to create transparent backgound, but I think Im doing some mistake somewhere :-(

 

so :

 

I add background image for the site here :

 

https://www.dropbox.com/s/pqnfxucwhfu2sg2/Screenshot%202014-08-01%2010.06.01.png 

 

I setup for the area in area stylings for backgroud "no background"

 

https://www.dropbox.com/s/sq7v91h1nrxofg7/Screenshot%202014-08-01%2010.11.05.png

 

but if I add the css code in custom css for post is is still in the background base color :-(

 

 

My idea for the site is something like is the picture :

 

https://www.dropbox.com/s/qqe9yvmod7jmr3r/mf-idea.jpg

 

could you pls help me with this ? thanx so much.

 

Roman

 

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The first image gives a 404 also, can you give us a link to the site in question please, so we can see what you have at the moment.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
romanondrasek    0
romanondrasek

Thanx for help. Roman

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

On the site you linked, you appear to be using the RevSlider section. If you want to add a background image and then add other sections that overlap that background image. What you're going to need to do is add a Canvas section to your template, then upload a background image to it. From here, add whatever sections you like and position them. Once they're in the correct position, you're going to need to use custom CSS to remove the background color from those sections, so that you can see the background image under them.

 

You can't really do this with the RevSlider, unless you're prepared to use the Extra Slider options and custom HTML.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
romanondrasek    0
romanondrasek

Hi Danny,

thanx for help :-) Now I understand. Just have another question according this :

 

I upload picture like a background. And I would like to use same or similar with same proportions on other sites. But - like to fix the size of the picture. It seems that it change the size with the size of the column.

 

you can see it here :

http://www.myfit.cz/o-nas/

 

and here is same picture on the background but the size is different.

 

http://www.myfit.cz/category/aktuality-my-fit/

 

Sorry for this question, but I donť know how to realize  this idea :-(

 

Roman

Share this post


Link to post
Share on other sites
romanondrasek    0
romanondrasek

Hi again, no I see, that if I will setup the image in the canvas area like a parallaxed and repeat background image it fix the size of the image. but - my idea was to have just one image in the background with place in the middle for the text. I don't know how to setup this (the image need some specific size ??)

 

thanx

 

Roman

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you want to have a background image, then you will want to upload your image to the DMS Toolbar > Site Settings > Color & BG and use the background image upload and do not use the repeat option, instead use fit to page. By adding your image to a Canvas area, all you're doing is adding an image to that area, so if you add content beneath the Canvas area you're not going to have your image used in that area.

 

Also, your image appears to contain an area that as far as I can tell is supposed to be used as a content background. You shouldn't really do this, instead you should just have your background image and then style your content area so that it has the style you currently have in your image. The reason for this is that doing the method you have now, can be a bit of a pain to get the content and image in the correct position.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
romanondrasek    0
romanondrasek

thanx for the answer.

 

My idea was to have different pictures for different pages, but with the same "place" for the text (for example on the site about walking program to have picture with walking).

 

I understand, that I should upload one image for the whole site here

 

https://www.dropbox.com/s/3hzruighj9tvzo8/Screenshot%202014-08-27%2013.00.45.png?dl=0

 

but will be same for all site, right?

 

Or is there some option to have different pictures in the background on different sites? (maybe to have just it in the canvas area like now and just setup the place for he text (WP Content/Loop) in css?

 

And - if I will do that how I have to change css to have just the box (place for the text) in this color (or in this color but semitransparent). 

 

Or - another option - should be in the background pictures like I have and the text of post will "scroll in the box" with fixed height and width?

 

I know that your are not doing support with custom ccs changes, but will be kind from your to help me with this (I like DMS).

 

thanx

 

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

If you upload an image using the background image option then that background image will be used throughout your site. Therefore, the only way to have different background images on a per page basis would be to use custom CSS.

 

WordPress adds a unique class to the body tag on all pages, you can use theses classes to add individual background images to your site.

 

For example:

 

Blog page code would be

 

body.blog .site-wrap {

  background: #F00;
}
 
For a specific page you will need to locate the ID of that page, you can do this by inspecting the body tag using Chromes dev tools, the class will look something like this page-id-1 or page-id-35353
 
Then you can prefix your code with that class so that the styling effects that page only, for example:
 
page-id-1 .site-wrap {
  background: #428bca;
}
 
You can also use background-image to include your image, see here for more information - http://www.w3schools.com/cssref/pr_background-image.asp
 
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • SaschaM
      By SaschaM+
      Hello,
      sorry. i got a problem on my site i can not fix myself, would be nice somebody can help.
      I use:
      - Platform 5 (latest) Pro
      - Pagelines Framework (latest for Platform 5)
      - keycdn (cdn enabler, cache enabler und optimus WebP)
      - my site:  example
      Problem:
      The background image i use in the Impulse Section is not beeing replaced automatically if i specify a CDN Url. I need to put in the cdn url to the image manually. Why?
      If you look in the button of the the side you see post grid section, where i have no problems. You also see there WebP Images working.
      Now i can not really use the direct cdn url for the impulse background image, cause i want to benefit there from WebP Image also in the background as it works in post grid section.
      How does it works with Impulse? The webP image for the background is ready to use.
      Thank you.
       
       
       
       
       
       
       
       
    • crose
      By crose+
      Hi,
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      http://gator4088.hostgator.com/~asif/
      Thanks in advance.
      Chuck
    • jeomiland
      By jeomiland+
      Hi
      Have a couple clients who are having background image issues. This should be a basic question so hope fix is easy. How do you get a specified image to auto resize so it fills the browser screen? Client has portrait-format image that's 1000x1000 and the left and right are displaying the background color (white) on my 1440 wide Macbook pro, as it is on client's computer. She has tried clicking "Fit image to page" and repeat background - neither is getting what she expects.  I suggested trying a landscape-format image.
      But the larger question is this - how does one plan a proper background image that will fill the whole screen - left to right - in the browser image and have it scale appropriately?  Should one always have landscape background images? What about scrolling vs not scrolling BG? How plan your BG image so it will fill the screen on laptops, ipads, iphones...  both in landscape and portrait format? Is it true that you can't do it? that either the left-right or top-bottom are cut off depending on the device and orientation?
      2 sites where this needs resolution:
      http://cassclayton.com/dev/
      http://chirecovery.com/
      Thanks!
      JE
    • hibbsy78
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?
      http://www.johnhibbs.me


    • dawsonbarber
      By dawsonbarber+
      Under PageLines > Settings, it looks like the actual setting for the background image tile size is missing.
×