I’m trying to customize my bootstrap template but there are no changes to the page

Asked

Viewed 92 times

-1

I’m in visual studio working on ASP.NET-MVC and I have a bootstrap template for my website. I wanted to add a blurred background image to my login page.

I put this code in the css file:

 bg.wallpaper {
        background-image: url(<<adicionei o URL todo>>\Test1.png);
        filter: blur(8px);
        -webkit-filter: blur(8px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

Then I did <div class="bg.wallpaper"></div> on the html page.

However there was no difference of any kind.

There is something in the template that is preventing me from making the changes?

css bootstrap-3

  • Classes in the element must be separated and no point: <div class="bg wallpaper"></div>. And in CSS missed the point in "bg": .bg.wallpaper {

1 answer

0


In the html we don’t need to put a . in the css classes, this is only required in the file .css which indicates that you will style a class.

.bg.wallpaper {
        background-image: url('https://marketingcomcafe.com.br/wp-content/uploads/2017/12/banco-imagens-gratis.png');
        filter: blur(8px);
        -webkit-filter: blur(8px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }
<div class="bg wallpaper"></div>

  • Hello @Otaviocapel. I tried what you said and did not give

  • upgrade. appeared a small blurred image as wanted. now I have to put as background

  • I edited the code above, that was because I set a width and height in div only for example. the image will occupy the entire space of your div.

  • I put it, but it wasn’t the background, it was just an image. I put the div to start at the beginning of the file and finish at the end. And as expected, the enlarged image and the text in the middle was also blurred, like the image. How to put text and text boxes apart from the image?

  • @Diogoteixeira if the CSS Class problem has been solved mark the question as accepted. If you have a different question and just open a New Question, it makes it easier for you and who will answer you. Avoid asking new questions in the comments, especially if it has nothing to do with the title or what you asked before.

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.