Announcement

Collapse
No announcement yet.

BackGround Responsive Image

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • BackGround Responsive Image

    Hiii

    I wouldlike to create a BackGround Responsive Image but I dont know how to do it

    Could you help me?

    ​Cheers

  • #2
    Sorry, but did you try a searchterm like (for example) "full screen width background image" in forum searchbox to see if any of the available threads will meet your needs maybe?

    Comment


    • #3
      Sorry, I checked before and I couldnt find anything interesting.

      Now, with your suggestion I found this solution that works fine.

      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;

      Cheers

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Glad to hear!

    • #4
      Hi Again!

      Ok, is almost done but there is a few things I can not fix it

      At the end I used this code from this page https://css-tricks.com/perfect-full-...kground-image/


      .Home {
      background: url("http://todosa1.es/wp/wp-content/uploads/2015/12/back.png") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

      So, I have 2 problems

      In the images I've attached, I would like to leave the design like in the medium image, but In the full image is cut on the top and on the phone version is cut as well.

      Cheers
      Attached Files

      Comment


      • #5
        That´s natural with that method as the image always has to "cover" the whole screen, no matter if landscape or portrait, so it´s likely that something will be cut off. A background image will normally NOT be important text. All you can do is to create media queries for several devices and orientations and use different images. Text should maybe be centered and not too large then.

        Comment


        • IkerAudicana
          IkerAudicana commented
          Editing a comment
          Ok, that's what I imagined

          On the phone example I will do another image for this device. On the other example (full) is necessary as well? There is not way to move the design down?

          Cheers

        • SiGa
          SiGa commented
          Editing a comment
          You can change positioning in the background declaration from center center to anything that looks or works better in your eyes. http://www.w3schools.com/cssref/pr_b...d-position.asp Or adjust in Photoshop to fit the declaration.

      • #6
        Thanks so much SiGa

        Is fixed

        Cheers

        Comment


        • #7
          Well, I did that in the footer of a site and worked well, but what if I want that in the EZ Footer area? I inserted the following:

          #ez-fat-footer-container-wrap, .fat-footer-inside #ez-fat-footer-container-wrap {
          background: url("http://www.pietervermeulenmuseum.nl/wp-content/uploads/dynamik-gen/theme/images/strand.jpg") no-repeat center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          }

          But this one does not react responsive. Any ideas?

          Peter Luit
          Last edited by peterluit; 01-20-2016, 07:39 AM.

          Comment


          • #8
            But this one does not react responsive
            Depends on what you´d expect from the pic (as mentioned in the other thread, HTML image tag and CSS background is not the same as therefore doesn´t act the same). There´s no valid URL we could check, hence there are no ideas.

            Comment

            Working...
            X