how to insert corretly my picture in css?

Multi tool use
i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
- main-menu
- phone.png
- _menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.
css image sass path
add a comment |
i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
- main-menu
- phone.png
- _menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.
css image sass path
add a comment |
i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
- main-menu
- phone.png
- _menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.
css image sass path
i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
- main-menu
- phone.png
- _menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.
css image sass path
css image sass path
asked Dec 30 '18 at 20:49
cecilececile
93
93
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
add a comment |
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
add a comment |
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
|
show 1 more comment
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
- main-menu
- phone.png
- menu.scss
i have always the 404 error
thank you
add a comment |
Maybe you can try: ./phone.png
.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981319%2fhow-to-insert-corretly-my-picture-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
add a comment |
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
add a comment |
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
answered Dec 30 '18 at 20:53
Dogukan CavusDogukan Cavus
2,8331424
2,8331424
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
add a comment |
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
thank you for your response but even with adding height and width, it doesn't work :(
– cecile
Dec 30 '18 at 21:00
add a comment |
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
add a comment |
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
add a comment |
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
answered Dec 30 '18 at 20:54
user8891469
add a comment |
add a comment |
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
|
show 1 more comment
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
|
show 1 more comment
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
answered Dec 30 '18 at 21:00
Harry PuniaHarry Punia
613
613
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
|
show 1 more comment
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
thank you but even this solution, it doesn't work. maybe i must write the absolute path ?
– cecile
Dec 30 '18 at 21:30
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Is the image placed in the same folder as the index.html / main.css file? if so then you don't need to define a path. Otherwise, try '../' to move back and '/' to move forward into your folders. Let me know if it helps.
– Harry Punia
Dec 30 '18 at 21:38
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
Also absolute path can have issues when loading the project on the server. Not the best practice.
– Harry Punia
Dec 30 '18 at 21:41
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
always no. i don't really know. the two files are in the same folder, so i write my code "img src="phone.png" ... and error, error and error. i don't understand
– cecile
Dec 31 '18 at 9:17
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
Another thing I notice is, that in the code you have put up there, you’re saying: url(phone.png). It’s missing the “”. So try url(“phone.png”). Let me know if that was the issue or not.
– Harry Punia
Dec 31 '18 at 9:55
|
show 1 more comment
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
- main-menu
- phone.png
- menu.scss
i have always the 404 error
thank you
add a comment |
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
- main-menu
- phone.png
- menu.scss
i have always the 404 error
thank you
add a comment |
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
- main-menu
- phone.png
- menu.scss
i have always the 404 error
thank you
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
- main-menu
- phone.png
- menu.scss
i have always the 404 error
thank you
answered Jan 2 at 12:17
cecilececile
93
93
add a comment |
add a comment |
Maybe you can try: ./phone.png
.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
add a comment |
Maybe you can try: ./phone.png
.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
add a comment |
Maybe you can try: ./phone.png
.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
Maybe you can try: ./phone.png
.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
answered Jan 17 at 15:52


Remco HortersRemco Horters
261
261
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981319%2fhow-to-insert-corretly-my-picture-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
S853QgF7ql UNnFlHK0IJhpz,1qggAtWm5yPJ,a CiyH2CYGngAtoLknRi ryx2KSq2mZaC2DoWwL,an