What can be the problem with background-image?

Question

What can be the problem with background-image?

Navigation

#1 by (0 votes)

0

sass

div

margin: 10px auto
width: 100%
max-width: 720px
min-width: 240px
background-image: url(..imagenes/img1.jpg)

jquery

var anchoS=($("div").width())*0.75;
$("div").css("height",anchoS);
$(window).resize(function(){
    anchoS=($("div").width())*0.75;
    $("div").css("height",anchoS);
});

I want to make a div with a background that is responsive I tried everything to put 'images / img1.jpg' instead of 3 points and nothing like I do to place a background image on that div, with those dimensions.

javascript jquery css3 sass

asked by Novato 29.12.2017 в 00:04

source

1 answer

Why when you print an array (array. [variable] .length) does it return the columns? Reading of NULL values within a text file

score 0 · Accepted Answer

1) Check the location of the image, remember that the background-image takes the url (without using frameworks) right from where you have the css file with that style. So if you have a folder structure like the following:

Proyecto
  -imagenes
     --img1.jpg
  -CSS
     --estilos.css
  -JS

You must be careful with the route you are going to place. Note that if you are in styles.css you must go up one level (to be at the height of images) and then enter images to be able to select img1.jpg so the route would look like this:

background-image: url(../imagenes/img1.jpg)

Remember that "../" serves to raise a level in the directory of your project.

2) On the other hand, locate the image, open the file and make sure it is "jpg" and not "jpeg" or "png" or something else because this influences and if you place the wrong one the image will not be selected and therefore you will not be able to observe it as the background of the div. So if your image is for example "png" at the end of the url it should be img1.png and not img1.jpg

3) For the responsive I would recommend that you use some front-end framework. Since it will greatly simplify your work in the face of responsive design. If you continue creating the "manual" responsive you will waste a lot of time coding in jquery and designing media queries.

Bootstrap is a perfect framework for responsive design, it is easy to install and is made up of a style sheet (.css) and a javascript file (.js). I recommend a framework because the background image will not be the only thing you should or want to place responsive ... To be able to see correctly on tablets and mobile phones everything must be responsive. The inputs, the results tables ... each of the visual elements of the forms must have this characteristic. You can read about bootstrap and download it at the official bootstrap page

I hope I helped you. Greetings!