problem with full page background picture

  • Hello ??

    I have several questions and several things I would like to do. After a little bit of self-help, I feel like I could use wordpress users’ expertise.

    website: https://www.prunellechamaret.com/

    1/ The first thing I would like to do is to stretch a picture in the background, so that it will fill the background but without loosing quality or parts of the picture. Original dimension of the picture is 990×700 if this matters. The composition is: a cat, plums in the top left hand corner, and a cake in the bottom right hand corner, that got cut out of the picture :/

    This is the code I am using right now: div {
    background: url(“https://www.prunellechamaret.com/wp-content/uploads/2014/10/fond12.jpg”);
    background-size: 100%;
    background-repeat: no-repeat;
    }

    But I am not satisfied:
    -the bottom of the picture doesn’t show on my site, it got cut out
    -it is repeated in the text box, only smaller. I want the background of the textbox to be different.

    2/ On my “About me” page, I would like to stretch a picture (dogs picture) in the text box so that it will fill the text from one side to the other, in lenght, horizontally, (to look like a banner).

    I had this code:
    <img src=”https://www.prunellechamaret.com/wp-content/uploads/2014/10/P1050193-Copie-2-Copie-1024×590.jpg&#8221; alt=”P1050193 – Copie (2) – Copie” width=”640″ height=”368″ class=”alignnone size-large wp-image-23″ />

    And decided to change the values to 100% but I then lose quality and the picture becomes all pixalized. (the original picture is much bigger and was taken with a profesionnal camera).

    <img src=”https://www.prunellechamaret.com/wp-content/uploads/2014/10/P1050193-Copie-2-Copie-1024×590.jpg&#8221; alt=”P1050193 – Copie (2) – Copie” width=”100%” height=”100%” class=”alignnone size-100% wp-image-23″ />

    3/ I noticed that it is possible to click on the picture because it has its own URL. It then gets bigger and then people could possibly right click and save the picture, is there a way the picture in the text box cannot be enlarged ?

    4/ I would like a code to change the background of my header (where Pru is written). Any suggestion ?

    5/Also, do people see the “wordpress menu” above my header, or is this just a menu only me can see because it is my website ? Even when I log out, I still see a wordpress menu !

    Any help would be appreciated ??
    Pru

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    1. If your image is not as large as the screen, it is going to stretch and be lower quality. The only thing you can do to stop that is have a larger image.

    Instead of applying the background image to the div element, put it on the .slider element. Since it’s on the div, it’s applying the image to any div that is on the page.

    2. Try adding this to your CSS:

    .content-middle img {max-width: 100%;}

    Additionally you should remove the set height/width attributes from the image tag.

    3. The link to the photo itself is in the page html and you should be able to remove that by removing it around the image in the page editor.

    4.

    #header-wrapper {background-image: url(IMAGE URL HERE);}

    5. I’m not seeing that.

    Thread Starter Pru123abc

    (@pru123abc)

    Hello Fevered ??
    Thank you very much for your answer.

    I tried to follow your explanation as for the dog picture (my second “issue”.
    So I managed to prevent the picture from being opened in another tab, now if someone right click on the picture it will redirect them to the home page of https://www.prunellechamaret.com/#/sample-page

    I tried removing the height and width of the picture as well as adding .content-middle img {max-width: 100%;}
    The picture is bigger now and hum now there is a lateral scroll bar on the bottom of the text box. I wanted the picture to fill the entire space in the text box, from side to side, in width.
    My new code looks like that now:
    <a href=""><img src="https://www.prunellechamaret.com/wp-content/uploads/2014/10/P1050193-Copie-2-Copie-1024x590.jpg" alt="P1050193 - Copie (2) - Copie" class="alignnone size-large wp-image-23 .content-middle img {max-width: 100%;}" /></a>

    I am sure it looks weird.

    ————————–
    But, first and foremost I think I need help with creating a child theme with Filezilla. I tried creating one, the right way, with a style.cc file and a functions.php file. But wordpress is saying:
    matchbook2 child; The parent theme is missing. Please install the “matchbook2;” parent theme.

    So I reinstalled the parent theme via wordpress and not via filezilla, but I still get the same message. “The parent theme is missing. Please install the “matchbook2;” parent theme. “

    Do you think my theme equipped to allow child themes ? Or is my problem that I am using windows notepad to edit style.css files ?

    This is what I wrote this in my child theme’s style.css:

    /*
 Theme Name:   matchbook2 child;
 Theme URI:    https://wordpress:8888/;
 Description:  This is a child theme;
 Author:       Pru;
 Author URI:   https://prunellechamaret.com;
 Template:     matchbook2;
 Version:      1.0.0;
*/

    and this in my child theme’s functions.php

    <?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

    Thanks again for your help !
    Pru

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘problem with full page background picture’ is closed to new replies.