Home / Forums / DynamiX Support / Full page width image

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts

  • Tony Fortuna
    Member

    If anyone can offer advice, I would be most grateful. I have looked through the forum and many answers are marked private? I want to place an image which is 1920×500, however even though the page has been set to full width, it reduces the image to 966×252. The only way is to insert revolution slider and it will display the full width. Why is is so hard to do? Isn’t full width full width and not set by container, wrapper whatever. It’s meant to be drag and drop with the visual composer. How can I work on a page in full width without any constrictions? It is an awesome Theme, just wish I didn’t have to muck around with code. I have included a link to a site where I woluld like to have a similar look by placing the images at the bottom (last 2)…. Help
    http://www.lifevantage.com/opportunity/

    Andy
    Andy
    Keymaster

    Hi Tony,

    The main content is set to 980px – anything inserted into this will be capped by that width. I’m building in the functionality to add background images to rows, currently you can only have full-width grey backgrouds. e.g. http://dynamix.themeva.com

    The only way to achieve you what you’re trying to achieve is by CSS.

    e.g. add wide-row to a row ( as per http://themeva.com/docs/dynamix/wide-row/ ) – then add another class e.g. my-image – it will read wide-row my-image in the row class.

    Then in Appearance > Theme Options > Customize > Custom CSS. Add a background image to the my-image class. e.g.

    .my-image {background-image:url(path-to-image.png);}

    I hope that helps, if you require us to add images for you, you can request it on the Customization Forum.


    Tony Fortuna
    Member

    Thanks Andy, appreciated.


    Tony Fortuna
    Member

    Hi Andy, followed your advice but it’s not working. I noticed you have period in front of my-image for the custom CSS, is that meant to be there? I have tried all sorts of combinations and can’t get it to work. Have supplied text below to show you:
    CSS = wide-row my-image
    In Appearance, custom CSS = .my-image {background-image:url (http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg);}


    Tony Fortuna
    Member

    Andy, correction to above.
    This is the correct custom CSS = .my-image {background-image:url(http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg);}

    It still doesn’t work, on refresh I can see the very top of the image flash on screen and then disappears, is there a height setting?


    Tony Fortuna
    Member
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Tony,

    Try this instead:

    .my-image .wide-row-inner {background-image:url (http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg);}


    Tony Fortuna
    Member
    This reply has been marked as private.

    Tony Fortuna
    Member
    This reply has been marked as private.

    Tom ( Support)
    Keymaster

    Hi Tony,

    It should read like this.

    Class name = wide-row my-image
    Custom CSS = .my-image .wide-row-inner {background-image:url (http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg);}

    I have tested the above code on my server and I can confirm it works. Please let me know how you get on.

    Kind regards,
    Tom


    Tony Fortuna
    Member

    Hi Tom

    Not working. I noticed you have (.wide-row-inner) in the custom CSS but only (wide-row) in the class name.
    I tried yours by copying and pasting, no image comes up at all, even the grey bar is missing. I tried adding (wide-row-inner) to the Class name, no difference.
    I want my image to be 1920px wide and not reduced to 980px. Can this be achieved?
    The image I want displayed is across the whole page as in this website, see bottom images,I’m after the same look.
    http://www.lifevantage.com/opportunity/

    To make sure I’m doing all the correct steps, this is what I have done:
    1. I add a row and place wide-row my-image in the Extra class name – (that’s all I do)
    2. I then go to Appearance > Theme Options > Customize > Custom CSS and paste in there .my-image .wide-row-inner {background-image:url (http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg);}

    my-image is that a CSS command or am I supposed to change that to something else, my-HappyGroup (the file name of my image being HappyGroup.jpeg).

    PS… are there any other settings I should be aware of? Could you outline the steps you took to make yours work please.
    Thanks.


    Tom ( Support)
    Keymaster

    Hi Tony,

    Ah, I presumed you would have content within it. If not, add a height e.g,
    .wide-row.my-image {height:400px;}

    Add this under your previous Custom CSS.

    Hope this helps.

    Kind regards,
    Tom


    Tony Fortuna
    Member

    Hi Tom
    REFUSES to place/insert image?
    You state: Ah, I presumed you would have content within it. What do you mean by that?
    I’ve also tried inserting the image inside the row to see what happens but it is reduced in size to 980px.
    I asked previously if you could outline the steps you took to make it work, if you could lead me and tell me step by step, just in case I left something out. Thanks.


    Tony Fortuna
    Member

    Tom, I deleted my-image from class name & custom css and the picture now loads, however it’s doubling up horizontally. Is there something like (no repeat) I can enter somewhere?


    Tony Fortuna
    Member

    Hi Tom, Ok, I got it to work in this manner – please feel free to comment.

    Class name
    wide-row

    Custom CSS
    .wide-row-inner{background-image:url(http://localhost/lifechangingfreedom.com/wp-content/uploads/2013/08/HappyGroup1.jpeg); background-repeat:no-repeat; background-position:center center;}
    .wide-row{height:500px;}

    Theme editor – Child theme Stylesheet CSS
    table.forum tr.alt,
    #topic-post-list li.alt,
    #bbpress-forums div.odd,
    #bbpress-forums ul.odd,
    .styledbox.general.shaded,
    .wpb_row.wide-row .wide-row-inner {
    background-color:#ffffff;

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.